拿起Typescript做一个轮子(三)

Url处理

需求分析

  • 把params参数拼接到url上,参数值支持对对象、数组、Date、特殊字符串的处理,丢弃url中的哈希标记,保留url中已存在的参数

我们在src下新建helpers文件夹作为我们之后存放公共辅助函数的地方,在该文件夹下新建url.ts和util.ts文件,url.ts编写对url进行处理的相关逻辑,util.ts编写对数据类型进行判断的相关逻辑。

因为在处理url时需要对日期和对象类型进行特殊的处理,所以我们在util.ts里编写两个判断日期和对象的方法

拿起Typescript做一个轮子(三)_第1张图片

然后在encodeurl时需要对特殊字符再转义回来

拿起Typescript做一个轮子(三)_第2张图片

处理url的逻辑

拿起Typescript做一个轮子(三)_第3张图片

然后我们把url处理的逻辑应用到请求当中

拿起Typescript做一个轮子(三)_第4张图片

Data处理

在helpers下新建个data.ts文件,存放我们处理data的逻辑

拿起Typescript做一个轮子(三)_第5张图片

拿起Typescript做一个轮子(三)_第6张图片

Header处理

需求分析

  • 支持在发送请求时可以设置headers属性
  • 并且当传入data为普通对象时,headers如果没有配置Content-Type属性,需要自动设置请求header的Content-Type字段为:application/json;charset=utf-8

在helpers文件夹下新建headers.ts文件,在这里实现headers处理的逻辑

拿起Typescript做一个轮子(三)_第7张图片

然后在processConfig方面里使用,注意这里对headers的处理要在data之前,因为transformRequestData方法会把data转成JSON字符串,那么我们的processHeaders方法就不能判断data为对象了

拿起Typescript做一个轮子(三)_第8张图片

拿起Typescript做一个轮子(三)_第9张图片

然后在xhr方法中设置headers

拿起Typescript做一个轮子(三)_第10张图片

获取响应数据

需求分析

  • 支持Promise链式调用
  • 处理返回的数据res,该对象包括服务端返回的数据data、HTTP状态码status、状态消息statusText、响应头headers、请求配置对象config以及请求的XMLHttpRequest对象实例request

我们先来定义接口类型

拿起Typescript做一个轮子(三)_第11张图片

接下来让我改造xhr方法

拿起Typescript做一个轮子(三)_第12张图片拿起Typescript做一个轮子(三)_第13张图片

然后改造axios方法

拿起Typescript做一个轮子(三)_第14张图片

拿起Typescript做一个轮子(三)_第15张图片

 

至此我们axios的基础功能已经实现完了,但目前我们还只实现了正常情况的逻辑,异常情况还没有做处理,那接下就开始对异常情况的处理。

 

你可能感兴趣的:(拿起Typescript做一个轮子(三))