封装微信小程序http拦截器过程解析
2019-08-13 11:47
1636 查看
前言
微信小程序是数据驱动的应用,开发技术和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); } };
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 微信小程序 http请求封装详解及实例代码
- 微信小程序HTTP接口请求封装的实现
- 微信小程序语音识别服务搭建全过程解析(项目开源在github)
- 微信小程序封装http访问网络库实例代码
- 微信小程序语音识别服务搭建全过程解析
- 微信小程序语音识别服务搭建全过程解析(https api开放,支持新接口mp3录音、老接口silk录音)
- 微信小程序 http请求封装详解及实例代码
- 微信小程序的授权实现过程解析
- 微信小程序解析富文本过程详解
- 微信小程序Http高级封装 es6 promise
- 微信小程序引入Vant组件库过程解析
- 微信小程序语音识别服务搭建全过程解析(内附免费的供小程序语音识别的https服务)
- 封装网络工具类(OkHttp_添加拦截器)
- 小程序登录微信授权组件封装
- 微信小程序~ajsx封装
- 微信小程序二维码解析遇到的问题
- 微信小程序 es6-promise.js封装请求 处理异步进程
- Mybatis拦截器执行过程解析
- 微信小程序[全栈]-配置本地Nodejs服务器全过程
- 微信小程序0.11.122100版本新功能解析