php小程序开发完整教程_微信小程序request封装

php小程序开发完整教程_微信小程序request封装flyio:一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、自动转换JSON、支持请求/响应拦截器、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。flyio官方文档flyio下载地址原生微信小程序中使用flyio请求,封装代码如下一、在src/utils下新建request.js文件,文件代码如下:/*flyio:一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

flyio:

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、自动转换JSON、支持请求/响应拦截器、强大的http请求库。
可以让您在多个端上尽可能大限度的实现代码复用。
flyio官方文档
flyio下载地址

原生微信小程序中使用flyio请求,封装代码如下

一、在src/utils下新建request.js文件,文件代码如下:

/*flyio: 一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。 可以让您在多个端上尽可能大限度的实现代码复用。 */
/**配置fly 请求体 */
//引入下载的源码文件
const Fly = require("./fly/dist/npm/wx")
const fly =new Fly()//创建fly实例 
import { 
   doLogin} from '../utils/wechat'
//设置超时时间
fly.config.timeout = 60000

//获取白名单
import whiteList from './whiteList'

//添加请求拦截器
fly.interceptors.request.use((request) => { 
   
    wx.showLoading({ 
   
        title: '加载中',
        'mask': true
    })
    //不显示加载中页面的接口
    if(whiteList.loading.indexOf(request.url) == -1){ 
   //indexOf()如果要检索的字符串值没有出现,则该方法返回 -1
        //隐藏loading遮罩
        wx.hideLoading();
    }
    
    //默认加入3rd_session
    let third_session = wx.getStorageSync("third_session");
    if(!third_session){ 
   //不存在third_session,重新登录
        request.body['third_session'] = '';
    }else{ 
   
        request.body['third_session'] = third_session;
    }
    request.params = request.body;
    request.headers['Content-Type'] = 'application/json;charset=utf-8';

    console.log("request.body:"+JSON.stringify(request.body));
    return request;
});

//添加响应拦截器,响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use((response, promise) => { 
   
    console.log("response",response)
    wx.hideLoading()
    switch(response.data.returnCode){ 
   
        case 200: //正常
            break;
        case 400: //后台自定义错误
            wx.showToast({ 
   
                title:response.data.msg,
                icon: 'none',
                duration: 2000
            })
            break;
        case 401: //pp_session过期 
            //重新静默登录获取code
            wx.removeStorageSync('loginFlag')
            doLogin()
            break;
        case 403: //登录状态失效 
            wx.removeStorageSync('loginFlag')
            wx.showToast({ 
   
                title:'登录状态丢失,请重新登录',
                icon: 'none'
            })
            //跳转登录页面
            wx.navigateTo({ 
   
                url: '/pages/login/login',
            })  
            break;
        case 500: //服务器错误
            wx.showToast({ 
   
                title:'服务器错误,请稍后重试',
                icon: 'none'
            })
            break;
        default:    
    }
    return promise.resolve(response.data)
},(err, promise) => { 
   
    wx.hideLoading()
    wx.showToast({ 
   
        title:'网络错误,请检查网络后重试',
        icon: 'none'
    })
    return promise.resolve()
})

export default fly

二、在src/utils下新建api.js文件

api.js文件中,引入 request.js: import fly from ‘./request.js’,然后调用fly 的封装的请求方法,最后 export default api,以为其他页面调用。代码如下:

//业务api
import fly from './request.js'
const baseURL = 'http://192.168.0.77:8083'//测试环境 http

const api ={ 
    
    baseURL: baseURL,
    //code换取session
    code2Session:(code) => fly.post('/wx/code2Session',{ 
   
        wx_code:code                
    },{ 
   
        baseURL: baseURL
    }),
    //登录或注册
    loginOrRegister:(data) => fly.post('/wx/loginOrRegister',data,{ 
   
        baseURL: baseURL
    }),
    //获取用户基本信息
    getUserInfo:() => fly.get('/user/getUserInfo',{ 
   
        
    },{ 
   
        baseURL: baseURL
    }),
    //获取图片列表信息
    getImgList:(pageNum,paseSize) => fly.post('/img/getImgList',{ 
   
        pageNum:pageNum,paseSize:paseSize
    },{ 
   
        baseURL: baseURL
    })
}
//获取图片详情信息
export function getImgDetail(query){ 
   
 return fly.request({ 
   
    baseURL: baseURL,
    url: '/img/getImgDetail?id='+query,
    method: 'get'
 })
}
//添加图片信息
export function addImg(data){ 
   
    return fly.request({ 
   
       baseURL: baseURL, 
       url: '/img/addImg',
       method: 'post',
       body: data,
       params: data, //可自定义配置项
    })
   }
export default api

三、接口的使用

1.在 js页面引入api : import api from ‘…/…/utils/api’
2.调用 api.js中 export的方法
3.示例:

// pages/my/my.js
//获取应用实例
const app = getApp()
import api from '../../utils/api'
Page({ 
   
	/** * 页面的初始数据 */
	data: { 
   
        userInfo: { 
   },
	},
	/** * 生命周期函数--监听页面显示 */
	onShow: function () { 
   
         //请求第三方服务器API获取用户基本信息
          this.getUserInfo()
	},
    //获取用户信息
    getUserInfo(){ 
   
        api.getUserInfo().then(res =>{ 
   
            console.log("getUserInfo",res)
            if(res.returnCode == 200){ 
   
                let userInfo = res.data
                this.setData({ 
   
                    userInfo: userInfo
                })
            }
        })
    },
})

注意事项

1.flyio API 文档 简单总结与注意事项
在这里插入图片描述
2.小程序中 api.js 中 方法请求参数问题:
由于使用flyio封装wx.request请求,请求参数自动填加到 request请求体的body中,服务器后台获取参数方法受限,get请求参数获取正常;post请求报异常,需要特殊处理,比较麻烦(使用常规方法获取参数,第一次正常,第二次报异常),解决方法

使用flyio封装时,把请求参数(request请求体的body内容) 赋值给 request请求体的params,服务后台 get请求 和
post请求 ,处理参数的方法一致采用 处理get请求参数的方法。

处理get请求参数的方法:

request.getParameter()
或request.getParameterMap()

request.js中:
在这里插入图片描述
服务器后台代码(获取请求参数,转map):

/** * 处理get请求参数: * get请求主要使用ParameterMap进行获取请求参数集合 * @param request * @return */
	public static Map<String, Object> getMethod(HttpServletRequest request) { 
   
		Map<String, Object> resultMap = new HashMap<String, Object>();
		Map<String, String[]> properties = request.getParameterMap();//把请求参数封装到Map<String, String[]>中
		//iterator:迭代器
		Iterator<Entry<String, String[]>> iterator=properties.entrySet().iterator();
		String name ="";
		String value ="";
		//遍历
		while(iterator.hasNext()){ 
   
			Entry<String, String[]> entry = iterator.next();
			name=entry.getKey();
			Object valueObject = entry.getValue();
			if(null == valueObject){ 
   
				value ="";
			}else if(valueObject instanceof String[]){ 
   
				String[] values=(String[]) valueObject;
				for(int i=0; i<values.length; i++){ 
   
					value = values[i]+",";
				}
				value = value.substring(0, value.length()-1);//去除最后一个逗号
			}else{ 
   
				value = valueObject.toString();//用于请求参数中请求参数名唯一
			}
			resultMap.put(name, value);
		}
		
		return resultMap;
	}

好了,内容到这里就结束了,希望对需要的人有帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/196051.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Pycharm远程开发_pycharm远程linux开发

    Pycharm远程开发_pycharm远程linux开发需要使用远程的linux服务器,但是因为pycharm很方便、希望在自己电脑上开发。这里直接使用pycharm进行远程开发。1.配置连接配置连接可以点击test_connection进行测试2.映射文件夹为了上传本地文件到服务器,以及把服务器下载到本地,需要分别设置这两个文件夹的路径3.设置编译器连接好了服务器,设置好了文件映射关系,接下来就是要使用远端的服务器了。设置成服务器端的解释器跟路径就行。(路径好像是根据之前的设置生成的)4.使用写一个简单的代码,run一下其实

    2022年8月25日
    4
  • FC游戏 《三国志2-霸王的大陆》攻略「建议收藏」

    FC游戏 《三国志2-霸王的大陆》攻略「建议收藏」《三国志2-霸王的大陆》是日本南梦宫公司研发的一款历史战略模拟游戏,于1992年06月10日在红白机平台上发行。在开始游戏选择君主时(一定要在君主未出现前的画面时进行第二步),按住1P的START不要放,按住START同时,连续依次按上,下,左,右,按满3次,听到“乒”一下的声音后再开始游戏,这时再选君主:君主城金钱、兵马、宝等全满。一、武将1)武将出场时间189年-190…

    2022年10月22日
    0
  • 液压油报关_液压油算是危险品吗

    液压油报关_液压油算是危险品吗  韩国液压油进口代理报关知识整理  液压油就是我们利用液体压力能的液压控制系统可以使用的液压介质,在液压技术系统中起着能量信息传递、抗磨、系统进行润滑、防腐、防锈、冷却等作用。对于液压油,首先要满足液压装置在工作温度和启动温度下的液体粘度要求,因为润滑油的粘度变化直接关系到液压作用、传动效率和传动精度,还要求润滑油的粘温性能和剪切稳定性能满足不同用途的需要。液压油的种类繁多,分类管理方法各异,长期发展以来,习惯以用途可以进行垃圾分类,也有学生根据不同油品类型、化学组分或可燃性分类的。这些分类方法只反

    2022年9月21日
    0
  • http.sys的简单应用

    http.sys的简单应用//publicvoidRun()//{////httpListener提供一个简单,可通过编程方式控制的Http协议侦听器。此类不能被继承。//if(!HttpListener.Is

    2022年7月1日
    19
  • jquery前端递归打印出树状结构的多层复杂map或json键值对数据

    jquery前端递归打印出树状结构的多层复杂map或json键值对数据

    2021年7月17日
    46
  • GoLand 2021.2.3 激活码(在线激活)

    GoLand 2021.2.3 激活码(在线激活),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    521

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号