前言
微信小程序是數據驅動的應用,開發技術和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);}};
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答