封装微信小程序http拦截器过程解析


Posted in Javascript onAugust 13, 2019

前言

微信小程序是数据驱动的应用,开发技术和vue、react和angular等mv*技术类似。在vue下可以用vue-resource、axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request(OBJECT),所以我们需要对wx.request进行封装,实现http拦截器的功能。

第一步:创建一个request.js文件

第二步:确定http、upload和websocket前缀

封装微信小程序http拦截器过程解析

第三步:封装wx.request

封装微信小程序http拦截器过程解析

在请求发出前处理http地址、请求头和参数、在响应后解析返回值并做基本的逻辑判断,重点是使用Promise对象。

第四步:导出模块

封装微信小程序http拦截器过程解析

第五步:使用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);
}
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
vuejs如何配置less
Apr 25 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 #Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 #Javascript
node删除、复制文件或文件夹示例代码
Aug 13 #Javascript
vue实现下拉加载其实没那么复杂
Aug 13 #Javascript
vue中created和mounted的区别浅析
Aug 13 #Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 #Javascript
微信小程序使用npm包的方法步骤
Aug 13 #Javascript
You might like
PHP4之真OO
2006/10/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php中session使用示例
2014/03/29 PHP
php查询操作实现投票功能
2016/05/09 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
python executemany的使用及注意事项
2017/03/13 Python
python简易远程控制单线程版
2018/06/20 Python
python读写配置文件操作示例
2019/07/03 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python实现批量转换图片为黑白
2020/06/16 Python
keras.layer.input()用法说明
2020/06/16 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
工作证明格式及范本
2014/09/12 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
公证书格式
2015/01/23 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2016十一国庆节感言
2015/12/09 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技