拿起Typescript做一个轮子(四)

本文介绍了如何使用Typescript处理网络异常、超时、非200状态码等错误,通过创建AxiosError类丰富错误信息,并应用createError方法改进错误处理。在xhr函数中添加了错误捕获和超时处理逻辑,确保更全面的错误反馈。
摘要由CSDN通过智能技术生成

处理网络异常错误

当网络出现异常的时候发送请求会触发XMLHttpRequest对象实例的error事件,于是我们可以在onerror的事件回调函数中捕获此类错误。

我们在xhr函数中添加以下代码:

处理超时错误

我们可以设置某个请求的超时时间timeout,也就是当请求发送超过某个时间后仍然没收到响应,则请求自动终止,并触发timeout事件。

请求默认的超时时间是0,所以我们首先需要允许配置超时时间。

接下来在xhr函数中添加超时处理逻辑:

处理非200状态码

对于一个正常的请求,往往会返回200-300之间的HTTP状态码,对于不在这个区间的状态码,我们也把它们认为是一种错误的情况处理。

我们再来改造下xhr函数:

错误信息增加

之前我们已经捕获了几类AJAX的错误,但是对于错误信息的提供非常有限,我们希望不仅包含错误文本信息,还包含了请求配置对象config,错误代码code,XMLHttpRequest对象实例request以及自定义响应对象response。

创建AxiosError类

先定义AxiosError类型接口:

接着我们在helper文件夹下创建error.ts文件,然后实现AxiosError类

应用createError方法

改造xhr方法

到此我们对错误的处理就完成了,之后我们对axios接口做扩展,支持更多的api。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值