拿起Typescript做一个轮子（三）

Url处理

需求分析

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

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

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

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

处理url的逻辑

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

Data处理

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

Header处理

需求分析

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

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

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

然后在xhr方法中设置headers

获取响应数据

需求分析

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

我们先来定义接口类型

接下来让我改造xhr方法

然后改造axios方法

 

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