《TypeScript 从零实现 axios》

处理请求 url 参数需求分析还记得我们上节课遗留了一个问题，再来看这个例子： 12345678axios({ method: 'get', url: '/base/get', params: { a: 1, b: 2 }}) 我们希望最终请求的 url 是 /base/get?a=1&b=2，这样服务端就可以通过请求的 url 解析到我们传来的参数数据了。实际上就是把 params 对象的 key 和 value 拼接到 url 上。 再来看几个更复杂的例子。 参数值为数组1234567axios({ method: 'get', url: '/base/get', params: { foo: ['bar', 'baz'] }}) 最终请求的 url 是 /base/get?foo[]=bar&foo[]=baz'。 ...

上传和下载的进度监控需求分析有些时候，当我们上传文件或者是请求一个大体积数据的时候，希望知道实时的进度，甚至可以基于此做一个进度条的展示。 我们希望给 axios 的请求配置提供 onDownloadProgress 和 onUploadProgress 2 个函数属性，用户可以通过这俩函数实现对下载进度和上传进度的监控。 1234567891011axios.get('/more/get',{ onDownloadProgress(progressEvent) { // 监听下载进度 }})axios.post('/more/post',{ onUploadProgress(progressEvent) { // 监听上传进度 }}) xhr 对象提供了一个 progress 事件，我们可以监听此事件对数据的下载进度做监控；另外，xhr.uplaod 对象也提供了 progress 事件，我们可以基于此对上传进度做监控。 代码实现首先修改...

辅助模块单元测试准备工作通常我们会优先为一个库的辅助方法编写测试，我们会优先为 ts-axios 库的 helpers 目录下的模块编写测试。我们在 test 目录下创建一个 helpers 目录，创建一个 boot.ts 空文件，这个是因为我们上节课给 Jest 配置了 setupFilesAfterEnv 指向了这个文件，后面的章节我们会编写这个文件。 然后我们可以在控制台运行 npm test，它实际上是执行了 jest --coverage 来跑单元测试，我们会发现它会报错，没有匹配的测试文件，那是因为我们还没有在 test 目录下编写任何一个 .spec.ts 结尾的测试文件。接下来我们就来为这些辅助模块编写相应的测试。 util 模块测试test/helpers/util.spec.ts： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475...

自定义合法状态码需求分析之前 ts-axios 在处理响应结果的时候，认为 HTTP status 在 200 和 300 之间是一个合法值，在这个区间之外则创建一个错误。有些时候我们想自定义这个规则，比如认为 304 也是一个合法的状态码，所以我们希望 ts-axios 能提供一个配置，允许我们自定义合法状态码规则。如下： 123456789axios.get('/more/304', { validateStatus(status) { return status >= 200 && status < 400 }}).then(res => { console.log(res)}).catch((e: AxiosError) => { console.log(e.message)}) 通过在请求配置中配置一个 validateStatus 函数，它可以根据参数 status 来自定义合法状态码的规则。 代码实现首先修改一下...

错误处理需求分析在上一章节，我们实现了 ts-axios 的基础功能，但目前为止我们都是处理了正常接收请求的逻辑，并没有考虑到任何错误情况的处理，这对于一个程序的健壮性而言是远不够的，因此我们这一章需要对 AJAX 各种错误情况做处理。 并且我们希望程序也能捕获到这些错误，做进一步的处理。 12345678axios({ method: 'get', url: '/error/get'}).then((res) => { console.log(res)}).catch((e) => { console.log(e)}) 如果在请求的过程中发生任何错误，我们都可以在 reject 回调函数中捕获到。 我们把错误分成了几类，接下来我们就来分别处理这些错误情况。 处理网络异常错误当网络出现异常（比如不通）的时候发送请求会触发 XMLHttpRequest 对象实例的 error 事件，于是我们可以在 onerror 的事件回调函数中捕获此类错误。 我们在 xhr ...

请求取消模块单元测试请求取消模块是 ts-axios 库核心流程其中一个分支，也是非常重要的模块，我们将从基础库和业务流程模块 2 个方面去编写单元测试。 Cancel 类单元测试cancel/Cancel.spec.ts： 12345678910111213141516import Cancel, { isCancel } from '../../src/cancel/Cancel'describe('cancel:Cancel', () => { test('should returns correct result when message is specified', () => { const cancel = new Cancel('Operation has been canceled.') expect(cancel.message).toBe('Operation has been canceled....

自定义参数序列化需求分析在之前的章节，我们对请求的 url 参数做了处理，我们会解析传入的 params 对象，根据一定的规则把它解析成字符串，然后添加在 url 后面。在解析的过程中，我们会对字符串 encode，但是对于一些特殊字符比如 @、+ 等却不转义，这是 axios 库的默认解析规则。当然，我们也希望自己定义解析规则，于是我们希望 ts-axios 能在请求配置中允许我们配置一个 paramsSerializer 函数来自定义参数的解析规则，该函数接受 params 参数，返回值作为解析后的结果，如下： 123456789101112axios.get('/more/get', { params: { a: 1, b: 2, c: ['a', 'b', 'c'] }, paramsSerializer(params) { return qs.stringify(params, { arrayFormat: &#...

HTTP 授权需求分析HTTP 协议中的 Authorization 请求 header 会包含服务器用于验证用户代理身份的凭证，通常会在服务器返回 401 Unauthorized 状态码以及 WWW-Authenticate 消息头之后在后续请求中发送此消息头。 axios 库也允许你在请求配置中配置 auth 属性，auth 是一个对象结构，包含 username 和 password 2 个属性。一旦用户在请求的时候配置这俩属性，我们就会自动往 HTTP 的 请求 header 中添加 Authorization 属性，它的值为 Basic 加密串。这里的加密串是 username:password base64 加密后的结果。 12345678910axios.post('/more/post', { a: 1}, { auth: { username: 'Yee', password: '123456' }}).then(res =...

处理响应 data需求分析在我们不去设置 responseType 的情况下，当服务端返回给我们的数据是字符串类型，我们可以尝试去把它转换成一个 JSON 对象。例如： 1data: "{"a":1,"b":2}" 我们把它转换成： 1234data: { a: 1, b: 2} transformResponse 函数实现及应用根据需求分析，我们要实现一个 transformResponse 工具函数。 helpers/data.ts： 12345678910export function transformResponse(data: any): any { if (typeof data === 'string') { try { data = JSON.parse(data) } catch (e) { // do nothing } }...

获取响应数据需求分析在前面的章节中，我们发送的请求都可以从网络层面接收到服务端返回的数据，但是代码层面并没有做任何关于返回数据的处理。我们希望能处理服务端响应的数据，并支持 Promise 链式调用的方式，如下： 12345678910axios({ method: 'post', url: '/base/post', data: { a: 1, b: 2 }}).then((res) => { console.log(res)}) 我们可以拿到 res 对象，并且我们希望该对象包括：服务端返回的数据 data，HTTP 状态码status，状态消息 statusText，响应头 headers、请求配置对象 config 以及请求的 XMLHttpRequest 对象实例 request。 定义接口类型根据需求，我们可以定义一个 AxiosResponse 接口类型，如下： 12345678export interface AxiosResponse...