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

 更新时间:2019年08月13日 11:47:59   作者:SUSIE_MASON  
这篇文章主要介绍了封装微信小程序http拦截器过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前言

微信小程序是数据驱动的应用,开发技术和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);
}
};

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

相关文章

  • nodejs创建web服务器之hello world程序

    nodejs创建web服务器之hello world程序

    本文给大家分享nodejs创建web服务器之hello world程序,node真的很好用,不仅用v8引擎来解析了javascript外,还提供了高度优化的应用库,真的很好,有需要的朋友一起来学习吧
    2015-08-08
  • 基于openlayers4实现点的扩散效果

    基于openlayers4实现点的扩散效果

    这篇文章主要为大家详细介绍了基于openlayers4实现点的扩散效果 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 微信小程序中使用ECharts 异步加载数据实现图表功能

    微信小程序中使用ECharts 异步加载数据实现图表功能

    本文通过实例代码给大家介绍了微信小程序中使用ECharts 异步加载数据实现图表功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • js实现数字滚动特效

    js实现数字滚动特效

    这篇文章主要为大家详细介绍了js实现数字滚动特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • javascript文本模板用法实例

    javascript文本模板用法实例

    这篇文章主要介绍了javascript文本模板用法,实例分析了文本模板的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript实现随机替换图片的方法

    JavaScript实现随机替换图片的方法

    这篇文章主要介绍了JavaScript实现随机替换图片的方法,涉及javascript中Math.random方法的灵活运用,需要的朋友可以参考下
    2015-04-04
  • 详解webpack 多页面/入口支持&公共组件单独打包

    详解webpack 多页面/入口支持&公共组件单独打包

    这篇文章主要介绍了详解webpack 多页面/入口支持&公共组件单独打包,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 基于 Immutable.js 实现撤销重做功能的实例代码

    基于 Immutable.js 实现撤销重做功能的实例代码

    这篇文章主要介绍了基于 Immutable.js 实现撤销重做功能及一些需要注意的地方,需要的朋友可以参考下
    2018-03-03
  • 详解TypeScript使用及类型声明文件

    详解TypeScript使用及类型声明文件

    声明文件是以.d.ts为后缀的文件,开发者在声明文件中编写类型声明,TypeScript根据声明文件的内容进行类型检查,这篇文章主要介绍了TypeScript使用及类型声明文件的相关知识,需要的朋友可以参考下
    2022-06-06
  • JS批量操作CSS属性详细解析

    JS批量操作CSS属性详细解析

    这篇文章主要介绍了JS批量操作CSS属性。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论