封装微信小程序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查看html源文件
Nov 08 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
JS中的变量作用域(console版)
Jul 18 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文件锁函数flock()详细介绍
2014/11/18 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
pandas如何处理缺失值
2019/07/31 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
keras之权重初始化方式
2020/05/21 Python
如何用python 操作zookeeper
2020/12/28 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
库房保管员岗位职责
2014/04/07 职场文书
开服装店计划书
2014/08/15 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android