封装微信小程序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);
}
};
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript中encodeURI和decodeURI方法使用介绍
encodeURI和decodeURI是成对来使用的,因为浏览器的地址栏有中文字符的话,可以会出现不可预期的错误,所以可以encodeURI把非英文字符转化为英文编码,decodeURI可以用来把字符还原回来2013-05-05
Javascript拖拽系列文章1之offsetParent属性
这个系列文章主要是讲述实现Javascript拖拽功能的基础知识,并将在最后给出一个完整的示例。适合对拖拽完全不懂的人阅读2008-09-09
Javascript 获取链接(url)参数的方法[正则与截取字符串]
有时我们需要在客户端获取链接参数,一个常见的方法是将链接当做字符串,按照链接的格式分解,然后获取对应的参数值。本文给出的就是这个流程的具体实现方法。2010-02-02
JavaScript操作DOM元素的childNodes和children区别
这篇文章主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下2015-04-04
JavaScript+html5 canvas制作色彩斑斓的正方形效果
这篇文章主要介绍了JavaScript+html5 canvas制作色彩斑斓的正方形效果,实例分析了JavaScript结合html5 canvas实现图形动态绘制的技巧,需要的朋友可以参考下2016-01-01
JavaScript使用SpreadJS创建Excel查看器
在现代的Web应用开发中,Excel文件的处理和展示是一项常见的需求,小编今天将为大家展示如何借助SpreadJS来创建一个Excel查看器,感兴趣的小伙伴可以了解下2023-12-12


最新评论