基于 TypeScript重构Axios-基础功能(response返回数据体)

75 阅读1分钟

针对response数据体的处理分为了以下三种

1、response数据体采用promise链式调用 2、对response数据体中headers、data从JSON字符串转化成JSON数据格式,增强使用体验

response数据体采用promise链式调用逻辑处理

处理功能实现
实现目标: 设置泛型,将XHR文件的函数返回规范为promise模式,使得XHR成链式调用的模式
  • 定义接口类型AxiosResponse

code11.png

  • 返回调用类型AxiosPromise

code12.png

  • 返回数据类型AxiosRequestConfig

code13.png

  • 获取响应数据逻辑(这块重点是request.onreadystatechange()函数及readyState属性)

code14.png

  • 由于xhr函数已经被定义成promise函数,在入口处index.ts也需要做return处理

code15.png

对response数据体中headers、res从JSON字符串转化成JSON数据格式,增强使用体验

处理功能实现:这块大体就是将JSON字符串转化成JSON,只不过处理逻辑根据返回的数据类型而有所差异
headers初始化数据状态实例

image.png

实现目标: 将headers JSON字符串转化成JSON

1、转换 code16.png

2、引用

code17.png

实现目标: 将请求返回数据res JSON字符串转化成JSON

1、转换

code18.png

2、链式调用xhr并对返回数据进行JSON序列化处理

code19.png