axios進階之路——攔截器篇

本課題包含三篇：基礎篇；攔截器篇；封裝篇。本篇爲攔截器篇，主題爲axios的請求攔截器、響應攔截器配置。

一、 攔截器介紹

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

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

二、 Axios實例

準備工作：

axios安裝： yarn add axios

實例創建：

新建js文件

// 引入axios
import axios from 'axios'

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

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種配置

1. 全局配置

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

2. 實例配置

let instance = axios.create({
    baseURL: 'xxxxx',
    timeout: 1000,  // 超時，401
})
// 創建完想要修改：
instance.defaults.timeout = 3000

3. 請求配置

instance.get('/xxx',{
    timeout: 5000
})

優先級如下：
請求配置 > 實例配置 > 全局配置

三、 攔截器配置

首先了解兩個方法：

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

從上可以看出，instance依然是第二步中創建的實例，然後對齊進行攔截，請求用request，響應用reponse，二者都有兩個配置項，一個是成功配置，一個是error配置。
接下來簡單舉例說明。

請求攔截器

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

響應攔截器

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

常見錯誤碼處理(error)

錯誤處理，請求錯誤時進行的處理。

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

但實際開發過程中，一般在請求/響應攔截器中統一做錯誤處理，有特殊接口的話做單獨的catch錯誤處理。

1. 請求錯誤碼處理

• 404： not found
• 401： 請求超時

axios.interceptors.request.use(req, err => {
    // 此處做統一處理
})

2. 響應錯誤碼處理

• 500： 系統錯誤
• 502： 系統重啓

axios.interceptors.reponse.use(res, err => {
    // 此處做統一處理
})

------

以上。
下一篇記錄整個請求流程，以及請求的封裝。