同一个请求有不同的拦截、超时等处理方法，之前使用retrofit实现，如何在axios实现同样功能？

【问题描述】 retrofit很容易对相同的请求接口进行不同的配置，同一个请求有不同的拦截、超时等处理方法，该功能不知道怎么在axios实现？例如我在retrofit中使用场景： 1）创建RetrofitBuilder配置；支持设置baseurl，设置Gson解析，设置自定义httpclient（例如okhttp），然后okhttp我们就能设置各种拦截器，超时。如图3 2）不同的RetrofitBuilder配置我们可以传入不同的okhttp的实例，实现不同的拦截，不同的超时请求。如图3。 3）使用上也很方便，拿对应的Api接口对象（不需要超时处理的，就拿toolApiWithNoTimeOut），直接调用方法就行。如图4。

图3 不同的RetrofitBuilder配置

通过不同的RetrofitBuilder，就能针对相同的接口(ToolApi定义的接口)，创建不同的拦截实现，超时实现等。

图4 用不同的RetrofitBuilder配置，来创建不同的请求接口对象

【运行环境】 硬件：rk3568； ROM: 3.2 Beta5； API 9

就能针对相同的接口(ToolApi定义的接口)

创建不同的拦截实现，超时实现等

对于上述 的使用场景，在axios中同样支持，并且使用更方便。
1. axios支持设置baseurl，设置Json解析（js原生接口），设置各种拦截器，和统一超时时间，如图1，还可以设置单个请求超时时间（图2）。
2. 同一请求设置不同的axios实例实现不同的拦截（语法支持），对标Retrofit第二第三点，如图1、图2、图3

1. import {AxiosStatic,AxiosInstance } from '@ohos/axios'  
   
2. import axios from '@ohos/axios'  
   
3. 
   
4. console.log("ttttt first load")  
   
5. 
   
6. const request:AxiosInstance = axios.create({  
   
7.    baseURL:'http://139.159.161.172:3000',  
   
8.    timeout:3000,  
   
9.     responseType:"text"  
   
10. })  
    
11.   
    
12. // request拦截器  
    
13. request.interceptors.request.use(async config => {  
    
14.     // 所有请求统一添加时间戳，避免部分获取到缓存数据  
    
15.     let timerstamp = new Date().getTime();  
    
16.     switch (config.method.toLocaleLowerCase()){  
    
17.         case 'get':{  
    
18.             if(config.params){  
    
19.                 config.params.timerstamp = timerstamp;  
    
20.             }else{  
    
21.                 config.params = {timerstamp:timerstamp};  
    
22.             }  
    
23.             break;  
    
24.         }  
    
25.         case 'post':{  
    
26.             if(config.data){  
    
27.                 config.data.timerstamp = timerstamp;  
    
28.             }else{  
    
29.                 config.data = {timerstamp:timerstamp};  
    
30.             }  
    
31.             break;  
    
32.         }  
    
33.     }  
    
34.     return config  
    
35. }, error => {  
    
36.     Promise.reject(error);  
    
37. })  
    
38. 
    
39. // 响应拦截器  
    
40. request.interceptors.response.use(res => {  
    
41.    return res;  
    
42. }, error => {  
    
43.         return Promise.reject(error);  
    
44.     }  
    
45. )  
    
46. 
    
47. export const AxiosRequest = request

复制代码

1. import {AxiosInstance } from '@ohos/axios'  
   
2. import axios from '@ohos/axios'  
   
3.   
   
4. const request:AxiosInstance = axios.create({  
   
5.     baseURL:'http://xxxx:3000',  
   
6.     timeout:3000  
   
7. })  
   
8. 
   
9. export const AxiosRequest2 = request
   

复制代码

1. import  {AxiosRequest} from './Request'  
   
2. import  {AxiosRequest2} from './Request2'  
   
3. import  {search} from './api/SearchApi'  
   
4. 
   
5. 
   
6. search({keywords:"飘向北方"},{},AxiosRequest,5000)  
   
7. search({keywords:"飘向北方"},{},AxiosRequest2,1000)

复制代码