【疑难杂症】 HarmonyOS NEXT中Axios库的响应拦截器无法拦截424状态码怎么办?

今天在开发一个HarmonyOS NEXT的应用的时候,发现http接口如果返回的状态码是424时,我在axios中定义的拦截器失效了。直接走到了业务调用的catch中。

问题表现:

我的拦截器代码如下:

解决办法:

先说解决办法,在拦截器的instance对象上,添加如下代码即可解决。赶时间的朋友,复制一下代码即可搞定。不赶时间的朋友请继续往下看。

TypeScript 复制代码
instance.defaults.validateStatus = (status) => {
  return status >= 200 && status < 500;
}

为什么会这样:

一开始怀疑是我的拦截器写的有问题。但是我换了一个可以返回200状态码的接口,拦截器又生效了。这勾起了我的好奇心。

居然还有这么诡异的问题。必须盘它!

这里鸿七公给大家分享一个通用的解决问题的思路。

遇到问题时,先用正常的case测试下,尽可能的在正常和异常的case之间发现这个问题的规律。实在没辙的时候,就用我们的看家本领------查看堆栈

在DevEco中,有个比较方便的功能,就是出问题的时候,我们可以快速的复制堆栈信息。

将复制出来的堆栈信息,找个编辑器(VS Code或其他的)粘贴下来:

于是我们发现了,报出这个AxiosError的触发位置是在oh_modules/.ohpm/@ohos+axios@2.2.0/oh_modules/@ohos/axios/src/main/ets/components/lib/core/settle.js 文件的第19行。

于是我们打开这个文件。在DevEco中使用快捷键Ctrl+N。唤出文件快速搜索框。输出文件名关键字,如下图:

这时就看到了Axios的源码,先不慌,Axios的源码超简单。

找到第19行,确实有reject出一个AxiosError 。再往上看,是因为没有满足if条件。而没有满足if条件是因为没有满足validateStatus的调用。

此时我们在第16行打个断点,再次触发一些http的调用。会发现断点会走到这里。然后点击DevEco的调试工具的步进按钮。或者按下快捷键F7。

此时DevEco会跳转到这个函数的定义处。

看到这里大家是不是都明白了,原因就是因为axios默认拦截的状态是在200-299之间。

那为什么axios默认只拦截了200-299的状态码呢?

这个涉及到了http协议相关的知识了,http协议中规定

状态码按数字范围分类,这些代码的每个类都有相同的基本含义。

  • 范围 100-199 分类为"信息"。
  • 200-299 为"成功"。
  • 300-399 为"重定向"。
  • 400-499 为"客户机错误"。
  • 500-599 为"服务器错误"。

所以axios只拦截200-299是没问题的。但是axios也提供了自定义 validateStatus 函数的方法,如果我们定义了validateStatus 函数,axios则会调用我们提供的validateStatus函数,这样我们就可以去修改axios的行为,达到我们想要的效果了。

TypeScript 复制代码
instance.defaults.validateStatus = (status) => {
  return status >= 200 && status < 500;
}

关于鸿七公


鸿七公拥有12+年的软件开发经验,一直专注于大前端领域,对原生APP开发、混合APP开发和鸿蒙APP开发都有较深入的研究,曾使用cordova、uni-app、React-Native、Flutter做过大量的项目,现在开始研究鸿蒙应用开发,擅长对APP开发的相关知识深入浅出。关注我,带你快速、扎实的学习鸿蒙应用开发。

相关推荐
音视频牛哥9 小时前
大牛直播SDK(SmartMediaKit)鸿蒙NEXT RTSP/RTMP低延迟播放器集成与实践指南
音视频·harmonyos·大牛直播sdk·鸿蒙rtmp播放器·鸿蒙rtsp播放器·鸿蒙next rtsp播放器·鸿蒙next rtmp播放器
廖松洋(Alina)12 小时前
02数据模型与单词仓库-鸿蒙PC端Electron开发
前端·华为·electron·开源·harmonyos·鸿蒙
坚果派·白晓明13 小时前
【鸿蒙PC三方库移植适配框架解读系列】第四篇:构建执行、产物获取与 HAP 集成
c语言·华为·harmonyos·鸿蒙·c/c++三方库
廖松洋(Alina)13 小时前
05手写画布实现-鸿蒙PC端Electron开发
华为·electron·开源·harmonyos·鸿蒙
廖松洋(Alina)14 小时前
07答案比对与反馈UI-鸿蒙PC端Electron开发
javascript·ui·华为·electron·开源·harmonyos·鸿蒙
eric*168815 小时前
20分钟跑通流程:鸿蒙 Module 发布 OpenHarmony 实战(附完整配置)
华为·harmonyos
廖松洋(Alina)15 小时前
10项目总结与优化方向-鸿蒙PC端Electron开发
华为·electron·开源·harmonyos·鸿蒙
坚果派·白晓明16 小时前
【鸿蒙PC三方库移植适配框架解读系列】第七篇:快速参考与模板
华为·harmonyos·鸿蒙·c/c++三方库·c/c++三方库适配
特立独行的猫a17 小时前
鸿蒙 PC 命令行工具迁移实战 · 内部课件(详细配套版)
华为·harmonyos·移植·鸿蒙pc
廖松洋(Alina)18 小时前
04极速划词页面实现-鸿蒙PC端Electron开发
华为·electron·开源·harmonyos·鸿蒙