封装微信小程序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 相关文章推荐
javascript写的一个链表实现代码
Oct 25 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JS使用正则表达式验证身份证号码
Jun 23 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
php intval的测试代码发现问题
2008/07/27 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python函数嵌套实例
2014/09/23 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
python实现数据写入excel表格
2018/03/25 Python
Puppeteer使用示例详解
2019/06/20 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
入党自荐书范文
2014/03/09 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
物流管理专业求职信
2014/05/29 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
支行行长岗位职责
2015/02/15 职场文书
感恩教育主题班会
2015/08/12 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书