Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼
更新時(shí)間：2023年01月19日 10:24:03 作者：www.wenwen
這篇文章主要介紹了Vue.js axios響應(yīng)攔截如何獲取返回狀態(tài)碼問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
axios響應(yīng)攔截獲取返回狀態(tài)碼方式整理
方法一
axios.interceptors.response.use(
response => {
console.log('攔截器響應(yīng)成功')
return response
},
error => {
console.log('攔截器響應(yīng)失敗')
console.log(error)
if(error.request){
console.log(error.request)
} else if(error.response){
console.log(error.response.data);
console.log(error.response.status);
}
if (error && error.response) {
switch (error.response.status) {
case 400: error.message = '請求錯誤(400)';
break;
case 401: error.message = '未授權(quán)，請重新登錄(401)';
break;
case 403: error.message = '拒絕訪問(403)';
break;
case 404: error.message = '請求出錯(404)';
break;
case 408: error.message = '請求超時(shí)(408)';
break;
case 500: error.message = '服務(wù)器錯誤(500)';
break;
case 501: error.message = '服務(wù)未實(shí)現(xiàn)(501)';
break;
case 502: error.message = '網(wǎng)絡(luò)錯誤(502)';
break;
case 503: error.message = '服務(wù)不可用(503)';
break;
case 504: error.message = '網(wǎng)絡(luò)超時(shí)(504)';
break;
case 505: error.message = 'HTTP版本不受支持(505)';
break;
default: error.message = '連接出錯'(${error.response.status})!;
}
}else{
error.message ='連接服務(wù)器失敗!'
}
return Promise.reject(error)
}
)
方法二
// request請求攔截器
axios.interceptors.request.use(
config => {
Indicator.open({
text: '加載中...',
spinnerType: 'fading-circle'
});
//如果cookie中存在Authorization
if(sessionStorage.getItem('Authorization')){
config.headers.common['Authorization'] = sessionStorage.getItem('Authorization')
config.headers.common['loginAuth'] = sessionStorage.getItem('loginAuth')
}
return config
},
error => {
Promise.reject(error)
}
);
//response響應(yīng)攔截器
axios.interceptors.response.use(
response => {
if(sessionStorage.getItem('Authorization')){
// 返回code === 1 || 返回code === 2
if(response.data.code === 1){
MessageBox.alert(response.data.msg).then(action=>{})
}else if(response.data.code === 2){
MessageBox.alert(response.data.msg).then(action=>{
sessionStorage.removeItem('Authorization')
router.push('/login')
})
}
}
Indicator.close() //響應(yīng)成功，關(guān)閉全局的Indicator
return response
},
error => {
Indicator.close() // 響應(yīng)錯誤，關(guān)閉全局的Indicator
if(error){
const {response} = error
if(response.status >= 400 && response.status < 500){
MessageBox.alert('資源不存在，請稍后重試').then(action=>{
})
}else if(response.status >= 500){
MessageBox.alert('服務(wù)異常，請稍后重試').then(action=>{
})
}
if(response.data.message === 'Network Error'){
MessageBox.alert('網(wǎng)絡(luò)異常，請稍后重試').then(action=>{
})
}
}
return Promise.reject(error)
}
);
方法三
// axios請求攔截器
// 每次發(fā)送axios請求，都要帶上一個token
axios.defaults.timeout = 120000 // 設(shè)置默認(rèn)timeout為2分鐘
axios.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/json; charset=UTF-8'
config.headers['Cache-Control'] = 'no-catch'
const token = window.localStorage.getItem('accesstoken')
if (token) {
config.headers.common['access-token'] = `${token}`
}
return config
},
err => {
console.log(err)
return Promise.reject(err)
}
)
axios.interceptors.response.use(
response => {
const tokentimer = Number(window.localStorage.getItem('tokentimer'))
const tokenTimerStamp = Number(response.headers['token-timestamp'])
/* 時(shí)間戳比之前時(shí)間戳大的時(shí)候替換token */
if (tokentimer < tokenTimerStamp) {
window.localStorage.setItem('accesstoken', response.headers['access-token'])
window.localStorage.setItem('tokentimer', response.headers['token-timestamp'])
}
if (response.status === 200) {
// 導(dǎo)出成功不返回下面的字段
let _isTrue = response.data.success // 返回成功
let _message = response.data.message // 返回提示信息
let codeNum = response.data.code
let _code, _code3
if (codeNum) {
_code = codeNum.toString().slice(0, 1) // 返回失敗
_code3 = codeNum.toString().slice(0, 4)
} else {
// 排除導(dǎo)出時(shí)成功沒有返回code 導(dǎo)致報(bào)錯
if (response.data.code) {
Vue.prototype.$message({
message: `${codeNum}請求異常，請聯(lián)系管理員！`,
type: 'error'
})
}
}
if (_isTrue && codeNum === 20000) { // 返回成功請求
} else {
if (_code === '2' && codeNum !== 20000) {
Vue.prototype.$message({
message: `${codeNum}:${_message}`,
type: 'error'
})
} else if (_code === '5' || _code === '6') { // 狀態(tài)碼為5，6開頭的為服務(wù)器錯誤
Vue.prototype.$message({
dangerouslyUseHTMLString: true,
message: `${codeNum}:${_message}`,
type: 'error'
})
} else if (_code === '4') { // 狀態(tài)碼為4開頭的為權(quán)限問題，無法登錄
if (_code3 === '4032') {
router.push('/login')
} else {
Vue.prototype.$message({
message: `${codeNum}:${_message}`,
type: 'error'
})
}
}
}
return Promise.resolve(response)
}
return Promise.reject(response)
},
error => {
if (error.response) {
Vue.prototype.$message({
message: '系統(tǒng)異常，請聯(lián)系管理員！',
type: 'error'
})
} else {
Vue.prototype.$message({
message: '網(wǎng)絡(luò)不給力',
type: 'error'
})
}
return Promise.reject(error) // 返回接口返回的錯誤信息
})
Vue的axios攔截器用法
1.1 介紹：
攔截器包括請求攔截器與相應(yīng)攔截器，可以在請求發(fā)送前或者相應(yīng)后進(jìn)行攔截處理。在axios對象上有一個interceptors屬性，該屬性又有request和response兩個屬性。axios.interceptors.request和axios.interceptors.response對象提供了use方法，分類設(shè)置請求攔截器與響應(yīng)攔截器。
use()方法支持兩個參數(shù)，第一個參數(shù)是類似于Promise的resolve函數(shù)，第二個參數(shù)是類似于Promise的reject函數(shù)。我們可以在resolve或者reject函數(shù)中執(zhí)行同步或是異步打代碼邏輯。
根據(jù)官網(wǎng)介紹，其用法如下：
//2.1 請求攔截器
axios.interceptors.request.use(
? function (config) {
? ? //在請求之前做些什么
? ? return config
? },
? function (error) {
? ? //對請求錯誤做些什么
? ? return Promise.reject(error)
? }
)
?
//2.2 響應(yīng)攔截器
axios.interceptors.response.use(
? function (response) {
? ? //對響應(yīng)數(shù)據(jù)做點(diǎn)什么
? ? return response
? },
? function (error) {
? ? //對響應(yīng)錯誤做點(diǎn)什么
? ? return Promise.reject(error)
? }
)1.2 應(yīng)用場景
比如你在項(xiàng)目中的請求發(fā)送是都需要攜帶token值得，那么我們便可以巧妙的利用axios的請求攔截技術(shù)，使得我們只需要在這里攔截，判斷是否登錄即token值是否存在，存在則放行請求，不存在的話根據(jù)項(xiàng)目需求跳轉(zhuǎn)到相應(yīng)的頁面(一般是登錄頁面)去獲取token值再放行登錄，舉例如下：
1. 在src目錄的api目錄下創(chuàng)建一個axios.js文件
import axios from 'axios'
import store from '@/store/index' //引入store
import router from '@/router' //引入router
?
//第一步創(chuàng)建實(shí)例
//全局axios默認(rèn)值
//1.可以使用axios.defaulys的方式 ?2.可以使用axios.create()的方式,以下使用方式2
//方式1
// axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/"
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//方式2
let instance = axios.create({
? headers: {
? ? 'content-type': 'application/x-www-form-urlencoded'
? }
})
?
//第二步 設(shè)置攔截器
//2.1 請求攔截器
instance.interceptors.request.use(
? function (config) {
? ? let access_token = sessionStorage.getItem('access_token');
? ? //如果不存在字段，則跳轉(zhuǎn)到登錄頁面
? ? if (!access_token) {
? ? ? router.push({
? ? ? ? path: '/login',
? ? ? ? query: {
? ? ? ? ? redirect: router.currentRoute.fullPath
? ? ? ? }
? ? ? })
? ? ? //終止這個請求
? ? ? return Promise.reject();
? ? } else {
? ? ? //token存在，則讓每個請求頭都加上這個token，后臺會判斷我這個token是否過期
? ? ? config.headers.Authorization = access_token; //token放在請求頭那個字段根據(jù)后端而定
? ? }
? ? //到了這一步就是循序發(fā)送請求
? ? return config;
? },
? function (error) {
? ? //對請求錯誤做些什么
? ? // err為錯誤對象，但是在我的項(xiàng)目中，除非網(wǎng)絡(luò)問題才會出現(xiàn)
? ? Message.error({
? ? ? message: '請求超時(shí)!'
? ? })
? ? return Promise.reject(error);
? })
?
//2.2 響應(yīng)攔截器
// http response 攔截器
instance.interceptors.response.use(
? response => {
? ? // 如果返回的狀態(tài)碼為200，說明接口請求成功，可以正常拿到數(shù)據(jù)
? ? // 否則的話拋出錯誤
? ? if (response.status === 200) {
? ? ? return Promise.resolve(response);
? ? } else {
? ? ? return Promise.reject(response);
? ? }
? },
? // 服務(wù)器狀態(tài)碼不是2開頭的的情況
? // 這里可以跟你們的后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼
? // 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作，例如登錄過期提示，錯誤提示等等
? // 下面列舉幾個常見的操作，其他需求可自行擴(kuò)展
? error => {
? ? if (error.response.status) {
? ? ? switch (error.response.status) {
? ? ? ? // 401: 未登錄
? ? ? ? // 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑
? ? ? ? // 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作。
? ? ? ? case 401:
? ? ? ? ? vant.Toast.fail("身份驗(yàn)證失敗，請關(guān)閉重新進(jìn)入。");
? ? ? ? ? break;
?
? ? ? ? // 403 token過期
? ? ? ? // 登錄過期對用戶進(jìn)行提示
? ? ? ? // 清除本地token和清空vuex中token對象
? ? ? ? // 跳轉(zhuǎn)登錄頁面
? ? ? ? case 403:
? ? ? ? ? vant.Toast.fail("登錄過期，請關(guān)閉重新進(jìn)入。");
? ? ? ? ? // 清除token
? ? ? ? ? break;
?
? ? ? ? // 404請求不存在
? ? ? ? case 404:
? ? ? ? ? vant.Toast.fail("您訪問的網(wǎng)頁不存在。");
? ? ? ? ? break;
? ? ? ? // 其他錯誤，直接拋出錯誤提示
? ? ? ? default:
? ? ? ? ? vant.Toast.fail(error.response.data.message);
? ? ? }
? ? ? return Promise.reject(error.response);
? ? }
? }
);
//最后將實(shí)例導(dǎo)出來
export default instance2.在main.js中導(dǎo)入并掛載在Vue上
import instance from "./axios-init";//導(dǎo)入 //把a(bǔ)xios 作為Vue的原型屬性 window.axios = axiosInit(); Vue.prototype.$http = window.axios;//掛載
3.在頁面中使用
this.$http.post(url, params).then(res=>{}).catch(error=>{});總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個元素還是一個文本，隨著思路的展開我們就來實(shí)現(xiàn)這個功能，需要的朋友可以參考下2023-10-10
vue單頁應(yīng)用加百度統(tǒng)計(jì)代碼（親測有效）
這篇文章主要介紹了vue單頁應(yīng)用加百度統(tǒng)計(jì)代碼的解決方法，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了element?upload?鉤子函數(shù)的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在axios中使用params傳參的時(shí)候傳入數(shù)組的方法
今天小編就為大家分享一篇在axios中使用params傳參的時(shí)候傳入數(shù)組的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了iview在vue-cli3如何按需加載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue實(shí)現(xiàn)前進(jìn)刷新后退不刷新效果
這篇文章主要介紹了vue實(shí)現(xiàn)前進(jìn)刷新，后退不刷新效果,即加載過的界面能緩存起來（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進(jìn)入時(shí)重新加載）。本文給大家分享實(shí)現(xiàn)思路，需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Vuejs 單文件組件實(shí)例詳解,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
最近做項(xiàng)目需要實(shí)現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價(jià)值,感謝的可以了解一下2024-03-03
自帶氣泡提示的vue校驗(yàn)插件（vue-verify-pop）
這篇文章主要為大家詳細(xì)介紹了自帶氣泡提示的vue校驗(yàn)插件，vue-verify-pop的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04