微信小程序是数据驱动的应用,开发技术和vue、react和angular等mv*技术类似。在vue下可以用vue-resource、axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request,所以需要我们针对wx.request进行封装,实现http拦截器的功能。
第一步:创建一个request.js文件
建议在utils下面创建一个request.js文件
第二步:确定http、upload和websocket前缀
const apiHttp ="https://此处填写自己的域名链接";
const socketHttp = "wss://.....com/wss";
request.js填写请求前缀
第三步:封装wx.request
functon fun(url,method,data,header){
data = data || {}
header = header || {}
let sectionId = wx.getStorageSync("UserSessionId");
if(sessionId){
..........//此处处理sessionId存在
}
wx.showNavigationBarLoading();
let promise = new Promise(function(resolve,reject){
wx.request({
url:apiHttp +url,
header: header,
data:data,
method:method,
success: function(res){....
},
fail:reject,
complete:function(){....}
});
});
return promise;
}
reject.js function fun
在请求发出前处理http地址、请求头和参数、在响应后解析返回值并做基本的逻辑判断,重点是使用Promise对象。
第四步:导出模块
module.exports = {
apiHttp: apiHttp,
socketHttp: socketHttp,
"get": function(url, data, header) {
return fun(url, "GET", data, header);
},
"post": function(url, data, header) {
return fun(url, "POST", data, header);
},
upload: function(url, name, filePath) {
return upload(url, name, filePath);
}
};
request.js 导出模块
第五步:使用request
const Request = require("/utils/request");//导入模块
Request.post("/api/xcxWxLogin", { //调用方法
code: res.code,
encryptedData: resp.encryptedData,
iv: resp.iv,
shareId: share.shareId || "",
salesmanId: share.salesmanId || "",
source: share.source || ""
}).then(res => { //成功回调
//todo
}).catch(err => {}); //异常回调
作者:Msgyvcici
链接:https://www.jianshu.com/p/813dd09ad39c
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。