基于 TypeScript重构Axios-基础功能(Error异常及增强处理)

142 阅读1分钟

针对Error异常及增强处理分为了以下三种:

  1. 处理网络请求异常
  2. 处理超时错误
  3. 处理非200状态码

处理网络请求异常

  • XMLHttpRequest中是有引入网络异常事件的,我们只需要在xhr.js文件中将其引入即可

code20.png

处理超时错误

  • XMLHttpRequest中带有timeout字段,我们在使用的时候给config对象添加一个timeout并赋值,并在XHR.JS文件中解构出来,赋值给new XMLHttpRequest返回事件的字段中,使其值不等于0(0代表无限期等待,赋值单位为ms),最后搭配ontimeout对超时的情况做逻辑处理即可
给传参增加一个可选字段校验timeout

code21.png

image.png

处理非200状态码

  • 这块就简单了,其实就是判断状态码是否大于等于200并且小于300,是就resolve,反之reject

image.png

Error异常增强处理

  • 这块增强处理我理解的是用户使用体验增强,即将库中所定义类型抛出使得用户可以使用库中已定义的类型请求异常的情况下返回更为充足的数据

创建AxiosError类型并继承Eroor类,集合用户业务场景下常用到的数据进行导出(注:这里需要注意的是,为了使得指针指向具备正确性,代码中使用了Object.setPrototypeOf的语法,不用这个的话this指向会异常)

code22.png

在index.js中引入并使用 image.png

最后一步就是创建一个新的一级文件Axios.ts,复制index.js的内容过去,index.js就只管导出事件和定义类型,更加简洁

image.png