前端快閃四： 攔截axios請求和響應

部落格猿馬甲哥發表於2021-10-09
前端iOS

馬甲哥繼續在同程藝龍寫一點大前端：

今天我們來了解一下 如何攔截axios請求/響應？

axios是一個基於 promise 的網路請求庫，可以用於瀏覽器和 node.js, promise 類似於C#的Task async/await機制，以同步的程式碼風格編寫非同步程式碼。

axios一般發起的是ajax請求，我們一般會封裝處理一些通用的 請求/響應動作。

比如馬甲哥就遇到：

  1. 在每次ajax跨域請求時，允許攜帶第三方憑據（cookie、authorization）
  2. 封裝4xx響應碼的處理邏輯

其中關鍵的就是用到axios的攔截器：

export interface AxiosInterceptorManager<V> {
  use<T = V>(onFulfilled?: (value: V) => T | Promise<T>, onRejected?: (error: any) => any): number;
  eject(id: number): void;
}

仔細圍觀usesdk，支援傳入兩個函式，
表示請求(響應)一旦準備好了/失敗了，你可以注入的動作。

精簡程式碼如下：

import axios from 'axios';
import {
    message
  } from 'antd'

const service = axios.create({
    baseURL: process.env.REACT_APP_APIBASEURL, 
    timeout: 5000
})
// 新增請求攔截器: 這是向後臺伺服器發起的ajax請求
service.interceptors.request.use((reqconfig) => {
    reqconfig.withCredentials = true;
    return reqconfig;
}, (error) => {
    return Promise.reject(error);
});

// 新增響應攔截器
service.interceptors.response.use((response) => {
    return response;
}, (error) => {
    if (error.response && error.response.status === 401) {
        message.error("無許可權操作，請聯絡tvs運維.")
    }
    return Promise.reject(error);
});

以上對於前端老鳥不值一提，但是上述攔截動作對於把握全棧web開發必不可少。

相關文章