axios 2.2.4在HarmonyOS 鸿蒙Next中重复发送请求问题,多次触发request拦截器

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

axios 2.2.4在HarmonyOS 鸿蒙Next中重复发送请求问题,多次触发request拦截器

调用了一次请求,日志也是调用了一次!可以确定

但是在request拦截器里面发现触发了两次,response拦截器也收到两次数据,但是response收到的第二次数据不完整

代码如下:

// 创建实例
const instance: AxiosInstance = axios.create({
baseURL: API.Url, //修改为自己项目的实际地址
timeout: 10000,//超时
headers: { ‘Content-Type’: ‘application/json’ },
});



//暴露封装请求–为什么没有把上面实例放入到下面中,避免每一个接口都去创建一次
//这里利用了泛型 T
export default <T>(config:AxiosRequestConfig): Promise<PtResponse<T>>=> {
// 请求拦截器
instance.interceptors.request.use((config:InternalAxiosRequestConfig) => {
// 对请求数据做点什么
const token = PreferencesUtil.getSync(TxConstants.TX_CLOUD_TOKEN, “”) as string;
if(token){
config.headers[‘token’]=token //设置token
}

return config;
}, (error:AxiosError) => {
return Promise.reject(error);
});




// 添加响应拦截器
instance.interceptors.response.use((response:AxiosResponse)=> {

// if(response.data.code==‘2001’){ //这里是举例 要根据自己项目的实际情况进行处理
// promptAction.showToast({ //用到了 @kit.ArkUI 的 promptAction进行系统弹窗提示
// message: response.data.massage,
// duration: 2000,
// alignment:Alignment.Center
// });
// return Promise.reject(response.data);
// }
// if(response.data.code==‘4001’){//这里是举例 要根据自己项目的实际情况进行处理
// router.pushUrl({ //用到了 @ohos.router 进行页面跳转
// url:“pages/LoginPage”
// })
// return Promise.reject(response.data);
// }

// 该返回的数据则是axios.then(res)中接收的数据
return Promise.resolve(response.data);
}, (error:AxiosError)=> {
console.log(“AxiosError”,JSON.stringify(error.response))
const status = error.response?.status;
switch (status) {
case 401://无权限未登录
router.pushUrl({ //用到了 @ohos.router 进行页面跳转
url:“pages/LoginPage”
})
break;
default :
promptAction.showToast({ //用到了 @kit.ArkUI 的 promptAction进行系统弹窗提示
message: “系统异常,请稍后再试!”,
duration: 2000,
alignment:Alignment.Center
});
break
}
// 该返回的数据则是axios.catch(err)中接收的数据
return Promise.reject(error);
});

return instance(config);
}

3 回复

你导出的是一个方法,每次调用方法都会添加一个拦截器,也就是第一次调用有一个拦截器,第二次调用添加了2个拦截器,调用100次添加100个拦截器。如下图,只导出axios实例就行

cke_216.png

楼主您好!建议可以先排查下是否多次axios请求重复添加拦截器了,可以先使用eject函数在请求结束后移除拦截器来排查,使用文档可参考https://gitee.com/openharmony-sig/ohos_axios#%E6%8B%A6%E6%88%AA%E5%99%A8

如果确实是请求时重复添加拦截器导致的,可以参考网络库封装的文档:https://developer.huawei.com/consumer/cn/blog/topic/03142012031816050,将网络请求封装成一个类,在构造函数里完成拦截器的初始化,将该类以单例的形式提供给外部业务使用。

在HarmonyOS 鸿蒙Next环境中使用axios 2.2.4版本遇到重复发送请求及多次触发request拦截器的问题,通常与请求管理或事件触发机制有关。以下是一些可能的排查方向:

  1. 检查请求触发逻辑:确认axios请求是否在不必要的场景下被重复调用。例如,在组件的生命周期方法或事件处理函数中多次调用相同请求。

  2. 拦截器配置:审查axios的request拦截器配置,确保没有循环调用或错误地触发多次拦截器。检查拦截器内部逻辑,避免不必要的异步操作或递归调用。

  3. 请求取消:使用axios的CancelToken或AbortController来管理请求,避免在请求尚未完成时重复发送。

  4. 事件去抖/节流:如果请求是由用户操作触发(如按钮点击),考虑实现去抖(debounce)或节流(throttle)机制,以减少重复请求。

  5. 版本兼容性:尽管axios 2.2.4在多数环境中表现稳定,但HarmonyOS的特殊环境可能导致特定问题。考虑升级到axios的最新版本,看是否能解决问题。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部