一.
請求后臺的時候,服務端對每一個請求都會驗證權限,而前端也需要對服務器返回的特殊狀態(tài)碼統(tǒng)一處理,所以可以針對業(yè)務封裝請求。
首先我們通過request攔截器在每個請求頭里面塞入token等信息,好讓后端對請求進行權限驗證。并創(chuàng)建一個respone攔截器,當服務端返回特殊的狀態(tài)碼,我們統(tǒng)一做處理,如未登錄網絡錯誤等操作。
二.
1.首先了解小程序官方api-wx.request() ,通過示例可以看出wx.request的參數(shù)是一個對象,擁有傳輸?shù)刂罚瑐鬏攦热荩憫^,成功失敗回調函數(shù)等屬性和方法,我們可以通過封裝相應的響應頭和成功失敗回調函數(shù)達到相應的目的:
// 官方代碼示例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.封裝
封裝請求頭和返回的狀態(tài)碼(注:具體頭需要添加哪些屬性,返回的狀態(tài)碼處理,是根據(jù)與后臺實際溝通所需的參數(shù)來制定的)
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等信息,與后臺協(xié)商好 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 { // 接收的后臺數(shù)據(jù)用自定義base64解密方法解密后轉為對象 let str = base64Decrypt(res.data); let data = JSON.parse(str); if (parseInt(data.resultCode, 10) === -1) {//后臺商議好的狀態(tài)碼,-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 + ',接口返回數(shù)據(jù):' + res.data); } } else if(res.statusCode === 404) { console.log('404'); } } } //執(zhí)行微信的請求 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, '成功') } })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答