本文轉(zhuǎn)載自微信公眾號(hào)「精益碼農(nóng)」，作者有態(tài)度的馬甲。轉(zhuǎn)載本文請(qǐng)聯(lián)系精益碼農(nóng)公眾號(hào)。

axios是一個(gè)基于 promise 的網(wǎng)絡(luò)請(qǐng)求庫，可以用于瀏覽器和 node.js;promise 類似于C#的Task async/await機(jī)制，以同步的代碼風(fēng)格編寫異步代碼;

而axios攔截器就類似于 C# HttpClient自定義message Handler, 給你一個(gè)請(qǐng)求/響應(yīng)在被handler之前做一些自定義動(dòng)作的機(jī)會(huì)。

C#請(qǐng)求/響應(yīng)攔截器

axios請(qǐng)求/響應(yīng)攔截器的定位就類似于 C# HttpClient的自定義message handler。

.NET默認(rèn)的message handler是HttpClientHandler，開發(fā)者可以插入自定義的message handler。

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

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

 
 
 
 

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

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

(2) 添加自定義message handler

使用HttpCLientFactory.Create方法：

 
 
 
 

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

自定義message handler的執(zhí)行順序，是傳入Create方法的順序，也就是說，上面最后一個(gè)handler是最先接觸到響應(yīng)的。

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

推及到.NET Core， 因?yàn)榇罅繎?yīng)用了提前配置&&依賴注入，實(shí)際由IHttpClientFactory來注入HttpClient。

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

 
 
 
 

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

更多有關(guān).NET Core IHttpClientFactory的內(nèi)幕請(qǐng)點(diǎn)這里。

axios 攔截器

axios一般發(fā)起的是ajax請(qǐng)求，我們一般會(huì)封裝處理一些通用的請(qǐng)求/響應(yīng)動(dòng)作。

碼甲哥就遇到：

(1) 在每次ajax跨域請(qǐng)求時(shí)，允許攜帶第三方憑據(jù)(cookie、authorization)

(2) 封裝4xx響應(yīng)碼的處理邏輯

其中就要用到axios的攔截器：

 
 
 
 

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

仔細(xì)圍觀usesdk，支持傳入兩個(gè)函數(shù)，

表示請(qǐng)求(響應(yīng))一旦準(zhǔn)備好了/失敗了，你可以注入的動(dòng)作。

精簡(jiǎn)代碼如下：

 
 
 
 

  
  
  
  
import axios from 'axios'; 
  
  
  
  
import { 
  
  
  
  
    message 
  
  
  
  
  } from 'antd' 
  
  
  
  
 
  
  
  
  
const service = axios.create({ 
  
  
  
  
    baseURL: process.env.REACT_APP_APIBASEURL,  
  
  
  
  
    timeout: 5000 
  
  
  
  
}) 
  
  
  
  
// 添加請(qǐng)求攔截器 
  
  
  
  
service.interceptors.request.use((reqconfig) => { 
  
  
  
  
    reqconfig.withCredentials = true; 
  
  
  
  
    return reqconfig; 
  
  
  
  
}, (error) => { 
  
  
  
  
    return Promise.reject(error); 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
// 添加響應(yīng)攔截器 
  
  
  
  
service.interceptors.response.use((response) => { 
  
  
  
  
    return response; 
  
  
  
  
}, (error) => { 
  
  
  
  
    if (error.response && error.response.status === 401) { 
  
  
  
  
        message.error("無權(quán)限操作，請(qǐng)聯(lián)系tvs運(yùn)維.") 
  
  
  
  
    } 
  
  
  
  
    return Promise.reject(error); 
  
  
  
  
}); 
 
 
 
 

以上對(duì)于前端老鳥不值一提，但是上述攔截動(dòng)作對(duì)于把握全棧web開發(fā)必不可少。

本文另作為前端快閃四：如何攔截axios請(qǐng)求/響應(yīng)?

文章標(biāo)題：這次使用一個(gè)舒服的姿勢(shì)插入HttpClient攔截器技能點(diǎn)
網(wǎng)頁網(wǎng)址：http://uogjgqi.cn/article/ccdscgi.html