如何封裝微信小程序http攔截器

這篇文章主要為大家展示了“如何封裝微信小程序http攔截器”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何封裝微信小程序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);
}
};

以上是“如何封裝微信小程序http攔截器”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！