axios使用攔截器統(tǒng)一處理所有的http請求的方法
axios使用攔截器
在請求或響應(yīng)被 then 或 catch 處理前攔截它們。
http request攔截器
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
return config;
}, function (error) {
// 對請求錯(cuò)誤做些什么
return Promise.reject(error);
});
http respones攔截器
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
return response;
}, function (error) {
// 對響應(yīng)錯(cuò)誤做點(diǎn)什么
return Promise.reject(error);
});
移除攔截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
為自定義axios實(shí)例添加攔截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
PS:下面看下axios攔截器使用
import axios from 'axios' // axios引用
import store from '../../store' // store引用
const serivce = axios.create({ // 創(chuàng)建服務(wù)
baseURL: 'http://test.api.rujiaowang.net', // 基礎(chǔ)路徑
timeout: 5000 // 請求延時(shí)
})
serivce.interceptors.request.use( // 請求攔截
config => {
if (store.getters.userToken) {
config.headers['X-Token'] = store.getters.userToken
config.headers['User-Type'] = store.getters.userType ? store.getters.userType : '' // 請求頭中存放用戶信息
config.onUploadProgress = (progressEvent) => {
var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
store.dispatch('setupLoadPercent', complete)
}
}
return config
},
error => {
return Promise.reject(error)
}
)
serivce.interceptors.response.use( // 回復(fù)攔截,主要針對部分回掉數(shù)據(jù)狀態(tài)碼進(jìn)行處理
response => {
return response
},
error => {
return Promise.reject(error)
}
)
export default serivce
總結(jié)
以上所述是小編給大家介紹的axios使用攔截器統(tǒng)一處理所有的http請求的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript之Object.assign()的痛點(diǎn)分析
這篇文章主要介紹了javascript之Object.assign()的痛點(diǎn)分析,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
讓DIV的滾動(dòng)條自動(dòng)滾動(dòng)到最底部的3種方法(推薦)
下面小編就為大家?guī)硪黄孌IV的滾動(dòng)條自動(dòng)滾動(dòng)到最底部的3種方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
javascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實(shí)例
下面小編就為大家?guī)硪黄猨avascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
JavaScript實(shí)現(xiàn)Excel表格效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Excel表格效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02
舉例講解JavaScript substring()的使用方法
這篇文章主要通過舉例的方法講解了javaScript substring()的用法,substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符,感興趣的小伙伴們可以參考一下2015-11-11
JavaScript擴(kuò)展運(yùn)算符的學(xué)習(xí)及應(yīng)用詳情(ES6)
這篇文章主要介紹了JavaScript擴(kuò)展運(yùn)算符的學(xué)習(xí)及應(yīng)用詳情(ES6),擴(kuò)展運(yùn)算符是ES6新增的一種運(yùn)算符,他可以幫助我們簡化代碼,簡化操作,具體相關(guān)知識感興趣的小伙伴可以查看下面文章的簡單介紹2022-08-08
使用ECharts進(jìn)行數(shù)據(jù)可視化的代碼詳解
ECharts 是一個(gè)由百度開源的強(qiáng)大、靈活的 JavaScript 圖表庫,用于在 Web 頁面上創(chuàng)建各種類型的數(shù)據(jù)可視化圖表,它具有豐富的圖表類型、強(qiáng)大的配置選項(xiàng)和良好的跨平臺(tái)兼容性,本文介紹了如何使用ECharts進(jìn)行數(shù)據(jù)可視化,需要的朋友可以參考下2024-08-08

