解決vue axios的封裝請求狀態(tài)的錯誤提示問題

更新時間：2018年09月25日 09:27:27 作者：zyx1303031629

今天小編就為大家分享一篇解決vue axios的封裝請求狀態(tài)的錯誤提示問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

/**
* axios配置,輸出為vue組建
* */
import axios from 'axios';
import qs from 'qs'
import CookiesJS from 'js-cookie'
import router from '../router'

// http request 攔截器
axios.interceptors.request.use(
config => {
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
};

// 在post請求發(fā)送出去之前，對其進行編碼
if (config.method === 'post') {
config.data = qs.stringify(config.data);
}
return config;
},
err => {
return Promise.reject(err);
});

// http response 攔截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
console.log("請求錯誤");
console.log(error.response.status);
switch (error.response.status) {
case 401:
// store.dispatch('logout');
console.log("401");
break;
case 404:
router.push('/Error/Error404');
break;
case 500:
router.push('/Error/Error500');
}

}
return Promise.reject(error);// 返回接口返回的錯誤信息
});

export default axios;


---------------------

以上這篇解決vue axios的封裝請求狀態(tài)的錯誤提示問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue?實現(xiàn)接口進度條示例詳解
這篇文章主要介紹了Vue實現(xiàn)接口進度條功能，在請求數(shù)據(jù)的過程中，需要添加監(jiān)聽函數(shù)來監(jiān)測數(shù)據(jù)請求的過程變化，并更新組件相應(yīng)的屬性和界面元素,本文結(jié)合實例代碼詳細講解，需要的朋友可以參考下
2023-04-04
在Vue3中實現(xiàn)動態(tài)路由的示例代碼
Vue3中的動態(tài)路由是一種高級功能,它允許你在URL中包含變量,這些變量可以在組件內(nèi)部通過$route.params對象訪問,動態(tài)路由通常用于構(gòu)建可配置性強、更具靈活性的應(yīng)用,本文詳細介紹了如何在vue3中實現(xiàn)動態(tài)路由,需要的朋友可以參考下
2024-07-07
Vue中的scoped和 elememt-plus的樣式修改方法
Vue中的scoped屬性用于實現(xiàn)樣式隔離,確保組件間的樣式互不影響,通過在組件的style標簽內(nèi)添加任何內(nèi)容,可以為組件生成一個唯一的哈希值,從而實現(xiàn)樣式的定位,本文通過實例代碼講解Vue中的scoped和 elememt-plus的樣式修改方法,感興趣的朋友一起看看吧
2025-01-01
在vue3中使用icon圖標的三種方案
這篇文章主要介紹了三種使用icon的方案，分別是element-icon、svg-icon、@iconify/vue，三種方案通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-07-07
el-checkbox-group?的v-model無法綁定對象數(shù)組的問題解決
elementUI官方文檔中el-checkbox-group組件綁定的都為一維數(shù)組，本文主要介紹了解決el-checkbox-group?的v-model無法綁定對象數(shù)組，感興趣的可以了解一下
2023-05-05
vue關(guān)于eslint空格縮進等的報錯問題及解決
這篇文章主要介紹了vue關(guān)于eslint空格縮進等的報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vant Weapp組件踩坑:picker的初始賦值解決
這篇文章主要介紹了Vant Weapp組件踩坑:picker的初始賦值解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Element輸入框帶歷史查詢記錄的實現(xiàn)示例
這篇文章主要介紹了Element輸入框帶歷史查詢記錄的實現(xiàn)示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue中nextTick函數(shù)和react類似實現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實現(xiàn)異步調(diào)度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實現(xiàn)代碼,需要的朋友可以參考下
2024-04-04
Element-plus表格數(shù)據(jù)延遲加載的實現(xiàn)方案
本文介紹了在前端展示大量數(shù)據(jù)時遇到的加載卡頓問題,并提供了一種解決方案：延遲加載,具體做法是設(shè)置加載數(shù)量,對于數(shù)據(jù)量較大的情況,進行分批加載數(shù)據(jù),通過類選擇器找到表格滾動條并進行監(jiān)聽綁定事件,感興趣的朋友跟隨小編一起看看吧
2024-11-11