OpenHarmony开发者论坛

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

![1.png](data/attachment/forum/202308/31/193058ec5fkrdc7hocduc1.png "1.png")

![2.png](data/attachment/forum/202308/31/193106qauxico0juwoyquu.png "2.png")


图3 不同的RetrofitBuilder配置

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

![3.png](data/attachment/forum/202308/31/193141e0tyf2a55zryosd5.png "3.png")



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

【运行环境】
硬件：rk3568；  ROM:  3.2 Beta5；  API 9
[/md]
作者: admin    时间: 2023-9-1 08:53
就能针对相同的接口(ToolApi定义的接口)
作者: admin    时间: 2023-9-1 08:56
创建不同的拦截实现，超时实现等
作者: 马迪    时间: 2023-9-5 10:19
对于上述 的使用场景，在axios中同样支持，并且使用更方便。
1. axios支持设置baseurl，设置Json解析（js原生接口），设置各种拦截器，和统一超时时间，如图1，还可以设置单个请求超时时间（图2）。
2. 同一请求设置不同的axios实例实现不同的拦截（语法支持），对标Retrofit第二第三点，如图1、图2、图3

(, 下载次数: 0)


  1. import {AxiosStatic,AxiosInstance } from '@ohos/axios'  
  2. import axios from '@ohos/axios'  

  4. console.log("ttttt first load")  

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

  39. // 响应拦截器  
  40. request.interceptors.response.use(res => {  
  41.    return res;  
  42. }, error => {  
  43.         return Promise.reject(error);  
  44.     }  
  45. )  

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

  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