Barry's Blog

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...

Jest 安装和配置Jest 安装由于我们的项目是使用 typescript-library-starter 初始化的，已经内置了 Jest 的安装，但是安装的版本却不是最新的，我们可以对 package.json 中的相关依赖版本做修改，重新安装。 1234567{ "@types/jest": "^24.0.13", "jest": "^24.8.0", "jest-config": "^24.8.0", "ts-jest": "^24.0.2", "typescript": "^3.4.5"} 注意，这里都是目前最新的版本，未来如果有版本升级的话，可以自行更新到最新版本。 更改版本后，在命令行再次执行 npm install 即可安装到相应版本。 Jest 配置在 package.json 文件中有 jest 字段，对应 Jest 配置： 1...

静态方法扩展需求分析官方 axios 库实现了 axios.all、axios.spread 等方法，它们的用法如下： 123456789101112function getUserAccount() { return axios.get('/user/12345');}function getUserPermissions() { return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Both requests are now complete })); 实际上，axios.all 就是 Promise.all 的封装，它返回的是一个 Promise 数组，then 函数的参数本应是一个参数为 Promise resolves（数组）...

引用 ts-axios 库在 TS 项目中引用我们借助于 vue-cli 脚手架创建一个 TypeScript 的 Vue 项目，然后我们把 Vue 官网上一段使用 axios 发请求的 demo 代码抄过来。 我们需要先执行 npm install ts-axios-new 安装 ts-axios 库。 HelloWorld.vue 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182&lt;template> <div class="hello"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>...

headers 模块单元测试之前我们测试了 headers 的基础方法模块，接下来我们会从业务角度测试 headers 的相关业务逻辑。 测试代码编写test/headers.spec.ts： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192import axios from '../src/index'import { getAjaxRequest } from './helper'function testHeaderValue(headers: any, key: string, val?: string): void { let found = false for (let k in headers) ...

前言单元测试是前端一个很重要的方向，鉴别一个开源库是否靠谱的一个标准是它的单元测试是否完善。有了完整的单元测试，未来你去重构现有代码或者是增加新的需求都会有十足的把握不出现 regression bug。 在前面的章节，我们已经编写完成 ts-axios 库的代码，并通过 demo 的形式简单地对一些功能做了验证，但是 demo 可以走到的代码分支，覆盖的场景都是极其有限的。为了用更科学的手段保证我们代码的可靠性，我们需要去编写单元测试，并尽可能达到 99% 以上的测试覆盖率。 这门课我们会使用开源测试框架 Jest，它是 Facebook 出品的一个测试框架，相对其他测试框架，它的一大特点就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。 由于时间有限，我不会带大家一行行手敲测试代码，但我会把所有的知识点和测试代码都带大家过一遍，确保大家都能够学会。但是我希望你们在学习的过程中，能自己手敲这些测试代码，这样有助于你们学习和巩固。 通过这一章节的学习，我希望你们能够学会使用 Jest 去对 JS 库或者是 TS 库编写单元测试，并能把所学应用到你们的实际项目...

请求模块单元测试请求模块是 axios 最基础的模块，通过一个 axios 方法发送 Ajax 请求。 jasmine-ajaxJasmine 是一个 BDD(行为驱动开发)的测试框架，它有很多成熟的插件，比如我们要用到的 jasmine-ajax，它会为我们发出的 Ajax 请求根据规范定义一组假的响应，并跟踪我们发出的Ajax请求，可以让我们方便的为结果做断言。 其实 Jest 也可以去写插件，但并没有现成的 Ajax 相关的 Jest 插件，但是 Jest 测试中我们仍然可以使用 Jasmine 相关的插件，只需要做一些小小的配置即可。 当然，未来我也会考虑去编写一个 Ajax 相关的 Jest 插件，目前我们仍然使用 jasmine-ajax 去配合我们编写测试。 jasmine-ajax 依赖 jasmine-core，因此首先我们要安装几个依赖包，jasmine-ajax、jasmine-core 和 @types/jasmine-ajax。 这个时候我们需要去修改 test/boot.ts 文件，因为每次跑具体测试代码之前会先运行该文件，我们可以在这里去初始化 ja...

请求和响应配置化需求分析官方的 axios 库 给默认配置添加了 transformRequest 和 transformResponse 两个字段，它们的值是一个数组或者是一个函数。 其中 transformRequest 允许你在将请求数据发送到服务器之前对其进行修改，这只适用于请求方法 put、post 和 patch，如果值是数组，则数组中的最后一个函数必须返回一个字符串或 FormData、URLSearchParams、Blob 等类型作为 xhr.send 方法的参数，而且在 transform 过程中可以修改 headers 对象。 而 transformResponse 允许你在把响应数据传递给 then 或者 catch 之前对它们进行修改。 当值为数组的时候，数组的每一个函数都是一个转换函数，数组中的函数就像管道一样依次执行，前者的输出作为后者的输入。 举个例子： 12345678910111213141516axios({ transformRequest: [(function(data) { return qs.strin...