一.
請求后臺的時候，服務端對每一個請求都會驗證權限，而前端也需要對服務器返回的特殊狀態碼統一處理，所以可以針對業務封裝請求。
首先我們通過request攔截器在每個請求頭里面塞入token等信息，好讓后端對請求進行權限驗證。并創建一個respone攔截器，當服務端返回特殊的狀態碼，我們統一做處理，如未登錄網絡錯誤等操作。
二.
1.首先了解小程序官方api-wx.request() ，通過示例可以看出wx.request的參數是一個對象，擁有傳輸地址，傳輸內容，響應頭，成功失敗回調函數等屬性和方法，我們可以通過封裝相應的響應頭和成功失敗回調函數達到相應的目的：
// 官方代碼示例wx.request({ url: 'test.php', //僅為示例，并非真實的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默認值 }, success (res) { console.log(res.data) } fail(res){ console.log(res) }})2.封裝
封裝請求頭和返回的狀態碼（注：具體頭需要添加哪些屬性，返回的狀態碼處理，是根據與后臺實際溝通所需的參數來制定的）
const app = getApp();const appid = 'xxxx';const appSecret = 'xxxxxx';let ajaxNum = 0;// 獲取accessTokenfunction getAccessToken(callback) { wx.request({ url: '/api/Token', data: { appid: aesEncrypt(appid),// aesEncrypt():自定義的用crypto-js.js進行aes加密的方法,這里只需要知道加密了即可，不需要關注此方法 appSecret: aesEncrypt(appSecret), }, success: function (res) { if(res.statusCode ===200 && res.data.code === 0) { let accesstoken = res.data.data.accesstoken; if (typeof (callback) === 'function' && accesstoken) { callback(accesstoken); } } }, })}// 封裝request請求const myRequest = options => { if(options) { getAccessToken(function (accesstoken){ // header 設置Content-Type，accesstoken, usertoken, noncestr, timestamp等信息，與后臺協商好 if(options.header === undefined || options.header === null) { options.header = {}; } options.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; // usertoken在登錄后保存在緩存中，所以從緩存中取出，放在header let usertoken = wx.getStorageSync('usertoken'); if (usertoken) { options.header['usertoken'] = usertoken; } // 自定義getNoncestr()設置隨機字符串，getTimestamp()獲取時間戳 let noncestr = getNoncestr(); let timestamp = getTimestamp(); // sign進行加密 let sign = getSign(accesstoken, appid, appSecret, noncestr, timestamp); if (timestamp) { options.header['timestamp'] = timestamp; } if (noncestr) { options.header['noncestr'] = noncestr; } if (sign) { options.header['sign'] = sign; } //url let baseUrl = config.BASE_HOST; if (options.url.indexOf('http') != 0) { options.url = baseUrl + options.url; } // method、data if (options.method === undefined || options.method === null) { options.method = 'post'; } if (options.method.toLowerCase() === 'post') { if(options.data) { let dataStr = JSON.stringify(options.data); let base64Str = base64Encrypt(dataStr); options.data = serializeData({ param: base64Str }); } } //success if (options.success && typeof(options.success) === 'function') { let successCallback = options.success; options.success = function(res) { // 判斷不同的返回碼 200/404 if (res.statusCode === 200) { try { // 接收的后臺數據用自定義base64解密方法解密后轉為對象 let str = base64Decrypt(res.data); let data = JSON.parse(str); if (parseInt(data.resultCode, 10) === -1) {//后臺商議好的狀態碼，-2未登錄，-1-3后臺出錯 console.error('網絡超時，請稍后重試'); } else if (parseInt(data.resultCode, 10) === -3) { console.error(data.msg); } else if (parseInt(data.resultCode, 10) === -2){ console.log("用戶未登錄-ajax"); } res.data = data; //調用自定義的success successCallback(res); } catch (e) { console.error('出錯了，' + e + ',接口返回數據:' + res.data); } } else if(res.statusCode === 404) { console.log('404'); } } } //執行微信的請求 wx.request(options); }); } }module.exports = { myRequest: myRequest頁面調用示范（與wx.request傳參一致）：
const ajax = require('ajax.js'); ajax.javaRequest({ url: '/xxx', data: { xxxx: xxx }, method: 'POST', success: res => { console.log(res, '成功') } })以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
