axios 請求攔截器&響應攔截器

一、 攔截器介紹

一般在使用axios時，會用到攔截器的功能，一般分爲兩種：請求攔截器、響應攔截器。

1. 請求攔截器
   在請求發送前進行必要操作處理，例如添加統一cookie、請求體加驗證、設置請求頭等，相當於是對每個接口裏相同操作的一個封裝；
2. 響應攔截器
   同理，響應攔截器也是如此功能，只是在請求得到響應之後，對響應體的一些處理，通常是數據統一處理等，也常來判斷登錄失效等。

二、 Axios實例

1. 創建axios實例

// 引入axios
import axios from 'axios'

// 創建實例
let instance = axios.create({
    baseURL: 'xxxxxxxxxx',
    timeout: 15000  // 毫秒
})

2. baseURL設置：

let baseURL;
if(process.env.NODE_ENV === 'development') {
    baseURL = 'xxx本地環境xxx';
} else if(process.env.NODE_ENV === 'production') {
    baseURL = 'xxx生產環境xxx';
}

// 實例
let instance = axios.create({
    baseURL: baseURL,
    ...
})

3. 修改實例配置的三種方式

// 第一種：侷限性比較大
axios.defaults.timeout = 1000;
axios.defaults.baseURL = 'xxxxx';

// 第二種：實例配置
let instance = axios.create({
    baseURL: 'xxxxx',
    timeout: 1000,  // 超時，401
})
// 創建完後修改
instance.defaults.timeout = 3000

// 第三種：發起請求時修改配置、
instance.get('/xxx',{
    timeout: 5000
})

這三種修改配置方法的優先級如下：請求配置 > 實例配置 > 全局配置

三、 配置攔截器

// 請求攔截器
instance.interceptors.request.use(req=>{}, err=>{});
// 響應攔截器
instance.interceptors.reponse.use(req=>{}, err=>{});

1. 請求攔截器

// use(兩個參數)
axios.interceptors.request.use(req => {
    // 在發送請求前要做的事兒
    ...
    return req
}, err => {
    // 在請求錯誤時要做的事兒
    ...
    // 該返回的數據則是axios.catch(err)中接收的數據
    return Promise.reject(err)
})

2. 響應攔截器

// use(兩個參數)
axios.interceptors.reponse.use(res => {
    // 請求成功對響應數據做處理
    ...
    // 該返回的數據則是axios.then(res)中接收的數據
    return res
}, err => {
    // 在請求錯誤時要做的事兒
    ...
    // 該返回的數據則是axios.catch(err)中接收的數據
    return Promise.reject(err)
})

3. 常見錯誤碼處理(error)
   axios請求錯誤時，可在catch裏進行錯誤處理。

axios.get().then().catch(err => {
    // 錯誤處理
})

四、 axios請求攔截器的案例

// 設置請求攔截器
axios.interceptors.request.use(
  config => {
    // console.log(config) // 該處可以將config打印出來看一下，該部分將發送給後端（server端）
    config.headers.Authorization = store.state.token
    return config // 對config處理完後返回，下一步將向後端發送請求
  },
  error => { // 當發生錯誤時，執行該部分代碼
    // console.log(error) // 調試用
    return Promise.reject(error)
  }
)

// 定義響應攔截器 -->token值無效時,清空token,並強制跳轉登錄頁
axios.interceptors.response.use(function (response) {
  // 響應狀態碼爲 2xx 時觸發成功的回調，形參中的 response 是“成功的結果”
  return response
}, function (error) {
  // console.log(error)
  // 響應狀態碼不是 2xx 時觸發失敗的回調，形參中的 error 是“失敗的結果”
  if (error.response.status === 401) {
    // 無效的 token
    // 把 Vuex 中的 token 重置爲空，並跳轉到登錄頁面
    // 1.清空token
    store.commit('updateToken', '')
    // 2.跳轉登錄頁
    router.push('/login')
  }
  return Promise.reject(error)
})

 

 

 

from：https://juejin.cn/post/7100470316857557006