微信小程序是数据驱动的应用,开发技术和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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。













