封装微信小程序http拦截器过程解析
微信(小程序)  /  管理员 发布于 5年前   422
前言
微信小程序是数据驱动的应用,开发技术和vue、react和angular等mv*技术类似。在vue下可以用vue-resource、axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request(OBJECT),所以我们需要对wx.request进行封装,实现http拦截器的功能。
第一步:创建一个request.js文件
第二步:确定http、upload和websocket前缀
第三步:封装wx.request
在请求发出前处理http地址、请求头和参数、在响应后解析返回值并做基本的逻辑判断,重点是使用Promise对象。
第四步:导出模块
第五步:使用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 => {}); //异常回调
第六步:拦截器完整代码
const apiHttp = "https://*****.com";const socketHttp = "wss://*****.com/wss";function fun(url, method, data, header) {data = data || {};header = header || {};let sessionId = wx.getStorageSync("UserSessionId");if (sessionId) {if (!header || !header["SESSIONID"]) { header["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) { if (typeof res.data === "object") { if (res.data.status) { if (res.data.status === -200) { wx.showToast({ title: "为确保能向您提供最准确的服务,请退出应用重新授权", icon: "none" }); reject("请重新登录"); } else if (res.data.status === -201) { wx.showToast({ title: res.data.msg, icon: "none" }); setTimeout(function() { wx.navigateTo({ url: "/pages/user/supplement/supplement" }); }, 1000); reject(res.data.msg); } } } resolve(res); }, fail: reject, complete: function() { wx.hideNavigationBarLoading(); }});});return promise;}function upload(url, name, filePath) {let header = {};let sessionId = wx.getStorageSync("UserSessionId"); //从缓存中拿该信息if (sessionId) {if (!header || !header["SESSIONID"]) { header["SESSIONID"] = sessionId; //添加到请求头中}}wx.showNavigationBarLoading();let promise = new Promise(function(resolve, reject) {wx.uploadFile({ url: apiHttp + url, filePath: filePath, name: name, header: header, success: function(res) { resolve(res); }, fail: reject, complete: function() { wx.hideNavigationBarLoading(); }});});return 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);}};
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号