詳解如何消除axios攔截中的if
更新時間：2022年04月17日 09:59:15 作者：科目三后吃飯
在使用vue的開發(fā)中,我們會使用axios來做前后端通信,那這時候我們就需要對請求前后做攔截,下面這篇文章主要給大家介紹了關于如何消除axios攔截中if的相關資料,需要的朋友可以參考下
基本攔截
axios的響應錯誤攔截中，難免會對error.status做各種各樣的if判斷，又或者switch。為了防止枯燥乏味的生活（給自己挖坑，換一種姿勢去寫攔截
// 以下大概是日常碰到的操作，攔截響應，判斷status做相應操作
function login () {
console.log('登陸邏輯')
return promise.reject(error)
}
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
// 對響應數據做點什么
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('服務器內部錯誤')
return promise.reject(error)
} else {
// 其他請求,直接拋出讓業(yè)務去處理
return promise.reject(error)
}
});設計輪子
思考方向
首先思考下怎么實現這個東西
- 需要一個在內部消化if的邏輯判斷
- 根據判斷去執(zhí)行相應的邏輯，意味著我們要在內部維護一個邏輯數組（以下稱為管道數組），配合成功后即觸發(fā)對應管道。所以在開始調用函數去執(zhí)行前，先要收集好管道。這個方法需要傳一個標記（用來判斷是否匹配）和回調函數（匹配成功后的邏輯）
- 除了傳標記，需要傳一個payload（例如攔截中的error）參數，payload可以讓我們在回調函數做出更多的對應操作
- 在最后再添加一個default函數來收集匹配失敗后的函數。
現在，已經在心中擬好了一個小輪子的五臟六腑。
輪子骨架
// 定義個一個class
class Enterclose {
constructor () {
// 維護管道數組
this.pond = {}
// 默認管道
this._default = null
}
/**
* 收集管道
* callback(payload)
* @param {any} sign 標記
* @param {Function|Object} callback 回調函數|函數this
* @return this
* */
use (sign, callback) {
return this
}
/**
* 收集匹配失敗的管道
* callback(payload)
* @param {Function} callback 回調函數|函數this
* @return this
* */
default (callback) {
this._default = callback
return this
}
/**
* 執(zhí)行管道流
* @param {any} sign 標記
* @param {any} payload
* @return
*/
start (sign, payload) {
}
}詳細實現
以上把基本的api骨架寫好，然后再一個一個慢慢實現內部的邏輯。
首先是use，用來收集管道，需求中標記是唯一的，所以我們的this.ponds的結構是{標記: callback}
use (sign, callback) {
this.ponds[sign] = callback
return this
}其中我們需要一個方法用來啟動Enterclose
通過getCallback函數去篩選和標記匹配的管道，返回對應的函數。這樣一個消除if的小輪子就搞好啦
start (sign, payload) {
const fn = this.getCallback(sign)
if (fn) {
return fn(payload)
}
}
/**
* 根據標記獲取函數
* @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)建實例，用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('服務器內部錯誤')
return promise.reject(error)
})
.default(function (error) {
// 收集默認管道
return promise.reject(error)
})
axios.interceptors.response.use(function (response) {
// 對響應數據做點什么
return response;
}, function (error) {
// 啟動
return enterclose.start(error.status, error)
});你也可以根據自己的場景做一些調整，例如支持Promise啊，或者說加一個finally函數，每次走管道最后都會調用這個回調函數之類
總結
到此這篇關于如何消除axios攔截中if的文章就介紹到這了,更多相關消除axios攔截的if內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行異步通信的技術,本文給大家介紹了使用JavaScript實現頁面局部更新的三種方法,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了Openlayers顯示地理位置坐標，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了防止video視頻被下載的處理方法匯總,本文給大家介紹了多種方法幫助大家解決防止video視頻被下載的問題,補充介紹了解決video標簽視頻禁止下載方法,感興趣的朋友一起看看吧2024-02-02
今天小編就為大家分享一篇關于js變量聲明var使用與不使用的區(qū)別詳解，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹的是一個JS獲取隨機數的函數可自定義最小值最大值,需要的朋友可以參考下2014-05-05
在JavaScript中,數組排序是一個常見的操作,本文將通過一個具體的代碼示例,解釋如何實現一個仿windows文件名稱的排序算法,需要的可以參考下2024-12-12
這篇文章主要介紹了JavaScript檢測并限制復選框選中個數的方法,涉及javascript針對復選框的判定與運算相關技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS iFrame加載慢的解決方法，非常實用，感興趣的朋友一起學習吧2016-05-05
昨晚春晚上劉謙的兩個魔術表演都非常精彩,尤其是第二個魔術,他演繹了經典的約瑟夫環(huán)問題！約瑟夫環(huán)是一個經典的數學問題,本文給出了完整的 JavaScript 代碼實現,感興趣的同學可以自己動手實現一下2024-02-02
這篇文章主要介紹了快速對接payjq的個人微信支付接口過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08