封装微信小程序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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
js电信网通双线自动选择技巧
Nov 18 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
详解vue中axios的封装
Jul 18 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
JavaScript将数组转换为链表的方法
Feb 16 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 include,include_once,require,require_once
2008/09/05 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
yii2实现 "上一篇,下一篇" 功能的代码实例
2017/02/04 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
datagrid框架的删除添加与修改
2013/04/08 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
2013/09/16 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Windows下python2.7.8安装图文教程
2016/05/26 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
仓库理货员岗位职责
2013/12/18 职场文书
文体活动实施方案
2014/03/27 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
导师推荐信范文
2014/05/09 职场文书
高中生旷课检讨书
2014/10/08 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
工人先进事迹材料
2014/12/26 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle