您好,登錄后才能下訂單哦!
今天小編給大家分享一下怎么消除axios攔截中的if的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
axios的響應(yīng)錯(cuò)誤攔截中,難免會(huì)對error.status做各種各樣的if判斷,又或者switch。為了防止枯燥乏味的生活(給自己挖坑,換一種姿勢去寫攔截
// 以下大概是日常碰到的操作,攔截響應(yīng),判斷status做相應(yīng)操作 function login () { console.log('登陸邏輯') return promise.reject(error) } // 添加響應(yīng)攔截器 axios.interceptors.response.use(function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response; }, function (error) { if (error.status === 401) { // 401重新登錄 console.log('未登陸') return login(error) } else if (error.status === 404) { console.log('404-什么都沒') return promise.reject(error) } else if (error.status === 422) { console.log(error.response.data.message) return promise.reject(error) } else if (error.status === 500) { console.log('服務(wù)器內(nèi)部錯(cuò)誤') return promise.reject(error) } else { // 其他請求,直接拋出讓業(yè)務(wù)去處理 return promise.reject(error) } });
首先思考下怎么實(shí)現(xiàn)這個(gè)東西
需要一個(gè)在內(nèi)部消化if的邏輯判斷
根據(jù)判斷去執(zhí)行相應(yīng)的邏輯,意味著我們要在內(nèi)部維護(hù)一個(gè)邏輯數(shù)組(以下稱為管道數(shù)組),配合成功后即觸發(fā)對應(yīng)管道。所以在開始調(diào)用函數(shù)去執(zhí)行前,先要收集好管道。這個(gè)方法需要傳一個(gè)標(biāo)記(用來判斷是否匹配)和回調(diào)函數(shù)(匹配成功后的邏輯)
除了傳標(biāo)記,需要傳一個(gè)payload(例如攔截中的error)參數(shù),payload可以讓我們在回調(diào)函數(shù)做出更多的對應(yīng)操作
在最后再添加一個(gè)default函數(shù)來收集匹配失敗后的函數(shù)。
現(xiàn)在,已經(jīng)在心中擬好了一個(gè)小輪子的五臟六腑。
// 定義個(gè)一個(gè)class class Enterclose { constructor () { // 維護(hù)管道數(shù)組 this.pond = {} // 默認(rèn)管道 this._default = null } /** * 收集管道 * callback(payload) * @param {any} sign 標(biāo)記 * @param {Function|Object} callback 回調(diào)函數(shù)|函數(shù)this * @return this * */ use (sign, callback) { return this } /** * 收集匹配失敗的管道 * callback(payload) * @param {Function} callback 回調(diào)函數(shù)|函數(shù)this * @return this * */ default (callback) { this._default = callback return this } /** * 執(zhí)行管道流 * @param {any} sign 標(biāo)記 * @param {any} payload * @return */ start (sign, payload) { } }
以上把基本的api骨架寫好,然后再一個(gè)一個(gè)慢慢實(shí)現(xiàn)內(nèi)部的邏輯。
首先是use,用來收集管道,需求中標(biāo)記是唯一的,所以我們的this.ponds的結(jié)構(gòu)是{標(biāo)記: callback}
use (sign, callback) { this.ponds[sign] = callback return this }
其中我們需要一個(gè)方法用來啟動(dòng)Enterclose
通過getCallback函數(shù)去篩選和標(biāo)記匹配的管道,返回對應(yīng)的函數(shù)。這樣一個(gè)消除if的小輪子就搞好啦
start (sign, payload) { const fn = this.getCallback(sign) if (fn) { return fn(payload) } } /** * 根據(jù)標(biāo)記獲取函數(shù) * @param {*} sign * @return {Function} */ getCallback (sign) { const key = Object.keys(this.ponds).find(key => key === sign) if (key) { return this.ponds[key] } else if (this._default) { return this._default } }
創(chuàng)建實(shí)例,用use和default收集管道,然后在攔截中通過start觸發(fā)判斷
const enterclose = new Enterclose() // 收集管道 enterclose .use(401, function (error) { console.log('未登陸') return login(error) }) .use(404, function (error) { console.log('404-什么都沒') return promise.reject(error) }) .use(429, function (error) { console.log(error.response.data.message) return promise.reject(error) }) .use(500, function (error) { console.log('服務(wù)器內(nèi)部錯(cuò)誤') return promise.reject(error) }) .default(function (error) { // 收集默認(rèn)管道 return promise.reject(error) }) axios.interceptors.response.use(function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response; }, function (error) { // 啟動(dòng) return enterclose.start(error.status, error) });
你也可以根據(jù)自己的場景做一些調(diào)整,例如支持Promise啊,或者說加一個(gè)finally函數(shù),每次走管道最后都會(huì)調(diào)用這個(gè)回調(diào)函數(shù)之類
以上就是“怎么消除axios攔截中的if”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。