同一个请求有不同的拦截、超时等处理方法，如何在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

对于上述 的使用场景，在axios中同样支持，并且使用更方便。

1. axios支持设置baseurl，设置Json解析（js原生接口），设置各种拦截器，和统一超时时间，如图1，还可以设置单个请求超时时间（图2）。

2. 同一请求设置不同的axios实例实现不同的拦截（语法支持），对标Retrofit第二第三点，如图1、图2、图3

• 图1 axios实例1
  
  

源码：

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

复制代码

• 图2 axios实例2
  

  

源码：

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

复制代码

        

• 图3 axios实例3
  

源码：

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)

复制代码