[[427901]]

本文轉載自微信公眾號「精益碼農」，作者有態度的馬甲。轉載本文請聯系精益碼農公眾號。

axios是一個基于 promise 的網絡請求庫，可以用于瀏覽器和 node.js;promise 類似于C#的Task async/await機制，以同步的代碼風格編寫異步代碼;

而axios攔截器就類似于 C# HttpClient自定義message Handler, 給你一個請求/響應在被handler之前做一些自定義動作的機會。

C#請求/響應攔截器

axios請求/響應攔截器的定位就類似于 C# HttpClient的自定義message handler。

.NET默認的message handler是HttpClientHandler，開發者可以插入自定義的message handler。

用途舉例 ① 插入日志 ② 插入自定義Header

(1) 更具體的就是System.Net.Http.DelegatingHandler類，開發者重寫SendAsync方法，可以攔截請求/響應, 注入動作。

protected override Task<HttpResponseMessage> SendAsync( 
     HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) 
} 

自定義message handler形成的是pipeline， 肉眼可猜測使用的是責任鏈模式。

(2) 添加自定義message handler

使用HttpCLientFactory.Create方法：

HttpClient client = HttpClientFactory.Create(new MessageHandler1(), new MessageHandler2()); 

自定義message handler的執行順序，是傳入Create方法的順序，也就是說，上面最后一個handler是最先接觸到響應的。

------以上是.NET Framework插入攔截器的用法-------

推及到.NET Core， 因為大量應用了提前配置&&依賴注入，實際由IHttpClientFactory來注入HttpClient。

提前配置HttpClient攔截器的代碼如下：

services.AddHttpClient("bce-request", x => 
                   x.BaseAddress = new Uri(Configuration.GetSection("BCE").GetValue<string>("BaseUrl"))) 
                .ConfigureHttpMessageHandlerBuilder(_=> new LoggerMessageHandler{...} )    
                .ConfigurePrimaryHttpMessageHandler(_ => new BceAuthClientHandler{...}) 

更多有關.NET Core IHttpClientFactory的內幕請點這里。

axios 攔截器

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 
}) 
// 添加請求攔截器 
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開發必不可少。

本文另作為前端快閃四：如何攔截axios請求/響應?