OpenHarmony开发者论坛

标题: 同一个请求有不同的拦截、超时等处理方法，如何在axios实现同样功能？ [打印本页]
作者: xiagengwen    时间: 2023-8-28 19:07
标题: 同一个请求有不同的拦截、超时等处理方法，如何在axios实现同样功能？
【问题描述】
retrofit很容易对相同的请求接口进行不同的配置，同一个请求有不同的拦截、超时等处理方法，该功能不知道怎么在axios实现？例如我在retrofit中使用场景：

1）创建RetrofitBuilder配置；支持设置baseurl，设置Gson解析，设置自定义httpclient（例如okhttp），然后okhttp我们就能设置各种拦截器，超时。如图3
2）不同的RetrofitBuilder配置我们可以传入不同的okhttp的实例，实现不同的拦截，不同的超时请求。如图3。
3）使用上也很方便，拿对应的Api接口对象（不需要超时处理的，就拿toolApiWithNoTimeOut），直接调用方法就行。如图4。
(, 下载次数: 0)
(, 下载次数: 0)


图3 不同的RetrofitBuilder配置

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

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

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


作者: 三只小海豚    时间: 2023-10-17 14:28
标题: 同一个请求有不同的拦截、超时等处理方法，如何在axios实现同样功能？
对于上述 的使用场景，在axios中同样支持，并且使用更方便。
1. axios支持设置baseurl，设置Json解析（js原生接口），设置各种拦截器，和统一超时时间，如图1，还可以设置单个请求超时时间（图2）。
2. 同一请求设置不同的axios实例实现不同的拦截（语法支持），对标Retrofit第二第三点，如图1、图2、图3
  • 图1 axios实例1

(, 下载次数: 0)
源码：
  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
复制代码

(, 下载次数: 0)

  

源码：

  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. })  

  9. export const AxiosRequest2 = request
复制代码

        

 (, 下载次数: 12)

源码：

  1. import  {AxiosRequest} from './Request'  
  2. import  {AxiosRequest2} from './Request2'  
  3. import  {search} from './api/SearchApi'  


  6. search({keywords:"飘向北方"},{},AxiosRequest,5000)  
  7. search({keywords:"飘向北方"},{},AxiosRequest2,1000)
复制代码












欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5