您好,登錄后才能下訂單哦!
這篇“微信小程序怎么制作api攔截器 ”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“微信小程序怎么制作api攔截器 ”文章吧。
安裝
npm install wxapp-api-interceptors --save 使用 mpvue等項目
import wxApiInterceptors from 'wxapp-api-interceptors'; wxApiInterceptors(); // 必須在調(diào)用小程序api之前調(diào)用 原生小程序項目
下載該項目,解壓移動文件夾dist里wxApiInterceptors.js和runtime.js文件到你自己的項目,詳見示例。
const wxApiInterceptors = require('./wxApiInterceptors'); wxApiInterceptors(); // 必須在調(diào)用小程序api之前調(diào)用 小程序api調(diào)用
不必傳success、complete和fail參數(shù)。
函數(shù)式異步調(diào)用方式:
wx.showLoading({title: '登錄中...'}) .then(wx.login) .then(data => wx.request.post('/login', {data})) .then(() => wx.showToast({title: '登錄成功'})) .catch(() => wx.showToast({title: '登錄失敗'})) .finally(wx.hideLoading); 也兼容原生的調(diào)用方式(不便維護):
wx.showLoading({ title: '登錄中...', success: () => { wx.login({ success: (data) => { wx.request({ url: '/login', data, success: () => wx.showToast({title: '登錄成功'}), fail: () => wx.showToast({title: '登錄失敗'}), complete: wx.hideLoading, }); }, }); }, }); 自定義攔截器
使用方法及參數(shù):wxApiInterceptors({[api]: {[request](params):params, [response](res):res}})
比如攔截wx.showModal的confirmColor默認(rèn)值為red,調(diào)用成功后并攔截調(diào)用成功返回的結(jié)果。
wxApiInterceptors({ showModal: { request(params) { if (params.confirmColor === undefined) { params.confirmColor = 'red'; } return params; }, response(res) { res = '調(diào)用成功'; return res; }, } }); wx.showModal({title: '測試'}) .then(console.log); // 控制的輸出:調(diào)用成功 默認(rèn)攔截了request api,封裝成了和axios差不多的使用方式
調(diào)用wx.request[method](url, [config])發(fā)送axios化的請求。
默認(rèn)GET請求
wx.request('https://test.com/banner') .then(({data}) => { console.log(data); }) 其他請求方式
wx.request.post('https://test.com', {data: {userName: 'test'}}) .then(({data}) => { console.log(data); }) 當(dāng)然也可以再繼續(xù)攔截request api
比如設(shè)置request api默認(rèn)的host:
wxApiInterceptors({ request: { request(params) { const host = 'https://test.com' if (!/^(http|\/\/)/.test(params.url)) { params.url = host + params.url; } return params; }, }, });
甚至可以攔截自己的業(yè)務(wù)狀態(tài)碼:
wxApiInterceptors({ request: { response(res) { const {data: {code}} = res; // 如果data里的code等于-1就響應(yīng)為失敗 if (code === -1) { return Promise.reject(res); } return res; }, }, }); 強大的async攔截器
比如調(diào)用request api的時候都在header里帶上本地儲存的token,沒有的話從服務(wù)器獲?。?/p>
wxApiInterceptors({ request: { async request(params) { if (params.header === undefined) { params.header = {}; } let token = wx.getStorageSync('token'); if (!token) { ({data: token} = await wx.request('/getToken')); wx.setStorageSync('token', token); } params.header.token = token; return params; }, }, });
以上就是關(guān)于“微信小程序怎么制作api攔截器 ”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。