vue中axios的攔截封裝

在實際vue項目開發中，與後臺數據交互，一般會使用axios庫，
而在使用的過程中，經常會遇到數據攔截，並且進行後續處理。

安裝

npm install axios

引入
在main.js文件中進行以下操作

import axios from 'axios'
Vue.prototype.axios=axios

攔截器的使用
一般我會將攔截器文件放在src->util目錄下

import axios from 'axios'

let instance=axios.create();
// http request 攔截器
instance.interceptors.request.use(config=>{
  // 每次發送請求之前判斷vuex中是否存在token        
  // 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登錄情況
  const token = store.state.token;        
  token && (config.headers.Authorization = token);        
  return config;  
},error=>{
  return Promise.error(error);
});

// http response 攔截器
instance.interceptors.response.use(
  response => {
    //攔截響應，做統一處理
    return response
  },
  //接口錯誤狀態處理，也就是說無響應時的處理
  //這裏的狀態碼可以和後臺協商好後統一做處理
  error => {
    switch(error.response.status){
      case 401:
	      //token失效，重新登錄
	      Toast({
	        message:'登錄超時，請重新登錄再進行操作。',
	        onClose(){
	          window.location.href=baseModelLoginUrl;
	        }
	      })
      break;
      //...
      //其他錯誤狀態碼的邏輯處理
	}
    return Promise.reject(error.response.status) // 返回接口返回的錯誤信息
  }
)

export default instance;//最後一定要切記導出instance

引入攔截器文件

// import axios from 'axios' 
// 之前是引入axios，現在直接替換爲interceptor文件即可正常使用
import axios from '../utils/interceptor'

export function getList(){
  const username = localStorage.getItem('username')
  const id = localStorage.getItem('id')
  return new Promise((resolve,reject)=>{
    axios.get(`${TEAM3_SERVICE}/getOrderStatusEnum`,{
      headers: {
        authorization: `Bearer ${localStorage.getItem('token')}`,
        currUser: `${id};${username}`
      }
    }).then(result=>{
      resolve(result.data);
    }).catch(err=>{
      reject(err)
    })
  })
}

--------------------------------Ending--------------------------------
如果對您有幫助，幫忙點個贊啦👍