基于TypeScript封装Axios笔记（五）
基于TypeScript封装Axios笔记（五）
需求分析
为了用户更加方便地使用 axios 发送请求，我们可以为所有支持请求方法扩展一些接口：
axios.request(config)axios.
get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
如果使用了这些方法，我们就不必在 config 中指定 url、method、data 这些属性了。
从需求上来看，axios 不再单单是一个方法，更像是一个混合对象，本身是一个方法，又有很多方法属性，接下来我们就来实现这个混合对象。
接口类型定义
根据需求分析，混合对象 axios 本身是一个函数，我们再实现一个包括它属性方法的类，然后把这个类的原型属性和自身属性再拷贝到 axios 上。
我们先来给 axios 混合对象定义接口：
types/index.ts：
1export interface Axios {
2 request(config: AxiosRequestConfig): AxiosPromise
3
4 get(url: string, config?: AxiosRequestConfig): AxiosPromise
5
6 delete(url: string, config?: AxiosRequestConfig): AxiosPromise
7
8 head(url: string, config?: AxiosRequestConfig): AxiosPromise
9
10 options(url: string, config?: AxiosRequestConfig): AxiosPromise
11
12 post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise
13
14 put(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise
15
16 patch(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise
17}
18
19export interface AxiosInstance extends Axios {
20 (config: AxiosRequestConfig): AxiosPromise
21}
22
23export interface AxiosRequestConfig {
24 url?: string
25 // ...
26}
首先定义一个 Axios 类型接口，它描述了 Axios 类中的公共方法，接着定义了 AxiosInstance 接口继承 Axios，它就是一个混合类型的接口。
另外 AxiosRequestConfig 类型接口中的 url 属性变成了可选属性。
创建 Axios 类
我们创建一个 Axios 类，来实现接口定义的公共方法。我们创建了一个 core 目录，用来存放发送请求核心流程的代码。我们在 core 目录下创建 Axios.ts 文件。
core/Axios.ts
1import { AxiosRequestConfig, AxiosPromise, Method } from '../types'
2import dispatchRequest from './dispatchRequest'
3
4export default class Axios {
5 request(config: AxiosRequestConfig): AxiosPromise {
6 return dispatchRequest(config)
7 }
8
9 get(url: string, config?: AxiosRequestConfig): AxiosPromise {
10 return this._requestMethodWithoutData('get', url, config)
11 }
12
13 delete(url: string, config?: AxiosRequestConfig): AxiosPromise {
14 return this._requestMethodWithoutData('delete', url, config)
15 }
16
17 head(url: string, config?: AxiosRequestConfig): AxiosPromise {
18 return this._requestMethodWithoutData('head', url, config)
19 }
20
21 options(url: string, config?: AxiosRequestConfig): AxiosPromise {
22 return this._requestMethodWithoutData('options', url, config)
23 }
24
25 post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
26 return this._requestMethodWithData('post', url, data, config)
27 }
28
29 put(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
30 return this._requestMethodWithData('put', url, data, config)
31 }
32
33 patch(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise {
34 return this._requestMethodWithData('patch', url, data, config)
35 }
36
37 _requestMethodWithoutData(method: Method, url: string, config?: AxiosRequestConfig) {
38 return this.request(
39 Object.assign(config || {}, {
40 method,
41 url
42 })
43 )
44 }
45
46 _requestMethodWithData(method: Method, url: string, data?: any, config?: AxiosRequestConfig) {
47 return this.request(
48 Object.assign(config || {}, {
49 method,
50 url,
51 data
52 })
53 )
54 }
55}
其中 request 方法的功能和我们之前的 axios 函数功能是一致。axios 函数的功能就是发送请求，基于模块化编程的思想，我们把这部分功能抽出一个单独的模块，在 core 目录下创建 dispatchRequest 方法，把之前 axios.ts 的相关代码拷贝过去。另外我们把 xhr.ts 文件也迁移到 core 目录下。
core/dispatchRequest.ts：
1import { AxiosPromise, AxiosRequestConfig, AxiosResponse } from '../types'
2import xhr from './xhr'
3import { buildURL } from '../helpers/url'
4import { transformRequest, transformResponse } from '../helpers/data'
5import { processHeaders } from '../helpers/headers'
6
7export default function dispatchRequest(config: AxiosRequestConfig): AxiosPromise {
8 processConfig(config)
9 return xhr(config).then(res => {
10 return transformResponseData(res)
11 })
12}
13
14function processConfig(config: AxiosRequestConfig): void {
15 config.url = transformURL(config)
16 config.headers = transformHeaders(config)
17 config.data = transformRequestData(config)
18}
19
20function transformURL(config: AxiosRequestConfig): string {
21 const { url, params } = config
22 return buildURL(url, params)
23}
24
25function transformRequestData(config: AxiosRequestConfig): any {
26 return transformRequest(config.data)
27}
28
29function transformHeaders(config: AxiosRequestConfig) {
30 const { headers = {}, data } = config
31 return processHeaders(headers, data)
32}
33
34function transformResponseData(res: AxiosResponse): AxiosResponse {
35 res.data = transformResponse(res.data)
36 return res
37}
回到 Axios.ts 文件，对于 get、delete、head、options、post、patch、put 这些方法，都是对外提供的语法糖，内部都是通过调用 request 方法实现发送请求，只不过在调用之前对 config 做了一层合并处理。
混合对象实现
混合对象实现思路很简单，首先这个对象是一个函数，其次这个对象要包括 Axios 类的所有原型属性和实例属性，我们首先来实现一个辅助函数 extend。
helpers/util.ts
1export function extend<T, U>(to: T, from: U): T & U {
2 for (const key in from) {
3 ;(to as T & U)[key] = from[key] as any
4 }
5 return to as T & U
6}
extend 方法的实现用到了交叉类型，并且用到了类型断言。extend 的最终目的是把 from 里的属性都扩展到 to 中，包括原型上的属性。
我们接下来对 axios.ts 文件做修改，我们用工厂模式去创建一个 axios 混合对象。
axios.ts：
1import { AxiosInstance } from './types'
2import Axios from './core/Axios'
3import { extend } from './helpers/util'
4
5function createInstance(): AxiosInstance {
6 const context = new Axios()
7 const instance = Axios.prototype.request.bind(context)
8
9 extend(instance, context)
10
11 return instance as AxiosInstance
12}
13
14const axios = createInstance()
15
16export default axios
在 createInstance 工厂函数的内部，我们首先实例化了 Axios 实例 context，接着创建instance 指向 Axios.prototype.request 方法，并绑定了上下文 context；接着通过 extend 方法把 context 中的原型方法和实例方法全部拷贝到 instance 上，这样就实现了一个混合对象：instance 本身是一个函数，又拥有了 Axios 类的所有原型和实例属性，最终把这个 instance 返回。由于这里 TypeScript 不能正确推断 instance 的类型，我们把它断言成 AxiosInstance 类型。
这样我们就可以通过 createInstance 工厂函数创建了 axios，当直接调用 axios 方法就相当于执行了 Axios 类的 request 方法发送请求，当然我们也可以调用 axios.get、axios.post 等方法。
demo 编写
在 examples 目录下创建 extend 目录，在 extend 目录下创建 index.html:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Extend example</title>
6 </head>
7 <body>
8 <script src="/__build__/extend.js"></script>
9 </body>
10</html>
接着创建 app.ts 作为入口文件：
1import axios from '../../src/index'
2
3axios({
4 url: '/extend/post',
5 method: 'post',
6 data: {
7 msg: 'hi'
8 }
9})
10
11axios.request({
12 url: '/extend/post',
13 method: 'post',
14 data: {
15 msg: 'hello'
16 }
17})
18
19axios.get('/extend/get')
20
21axios.options('/extend/options')
22
23axios.delete('/extend/delete')
24
25axios.head('/extend/head')
26
27axios.post('/extend/post', { msg: 'post' })
28
29axios.put('/extend/put', { msg: 'put' })
30
31axios.patch('/extend/patch', { msg: 'patch' })
然后在命令行运行 npm run dev，接着打开 chrome 浏览器，访问 http://localhost:8080/ 即可访问我们的 demo 了，我们点到 Extend 目录下，通过开发者工具的 network 部分我们可以看到每个请求的发送情况。
至此我们支持了对 axios API 的扩展，把它变成了一个混合对象。官方的 axios 实例除了支持了 axios(config)，还支持了传入 2 个参数 axios(url, config)，这里就涉及到函数重载的概念了。
axios 函数重载
需求分析
目前我们的 axios 函数只支持传入 1 个参数，如下：
1axios({
2 url: '/extend/post',
3 method: 'post',
4 data: {
5 msg: 'hi'
6 }
7})
我们希望该函数也能支持传入 2 个参数，如下：
1axios('/extend/post', {
2 method: 'post',
3 data: {
4 msg: 'hello'
5 }
6})
第一个参数是 url，第二个参数是 config，这个函数有点类似 axios.get 方法支持的参数类型，不同的是如果我们想要指定 HTTP 方法类型，仍然需要在 config 传入 method。
这就用到我们之前所学的函数重载知识点了，接下来我们来实现它。
重载实现
首先我们要修改 AxiosInstance 的类型定义。
types/index.ts：
1export interface AxiosInstance extends Axios {
2 (config: AxiosRequestConfig): AxiosPromise
3
4 (url: string, config?: AxiosRequestConfig): AxiosPromise
5}
我们增加一种函数的定义，它支持 2 个参数，其中 url 是必选参数，config 是可选参数。
由于 axios 函数实际上指向的是 request 函数，所以我们来修改 request 函数的实现。
core/Axios.ts：
1 request(url: any, config?: any): AxiosPromise {
2 if (typeof url === 'string') {
3 if (!config) {
4 config = {}
5 }
6 config.url = url
7 } else {
8 config = url
9 }
10 return dispatchRequest(config)
11 }
我们把 request 函数的参数改成 2 个，url 和 config 都是 any 类型，config 还是可选参数。
接着在函数体我们判断 url 是否为字符串类型，一旦它为字符串类型，则继续对 config 判断，因为它可能不传，如果为空则构造一个空对象，然后把 url 添加到 config.url 中。如果 url 不是字符串类型，则说明我们传入的就是单个参数，且 url 就是 config，因此把 url 赋值给 config。
这里要注意的是，我们虽然修改了 request 的实现，支持了 2 种参数，但是我们对外提供的 request 接口仍然不变，可以理解为这仅仅是内部的实现的修改，与对外接口不必一致，只要保留实现兼容接口即可。
编写 demo
examples/extend/app.ts：
1axios({
2 url: '/extend/post',
3 method: 'post',
4 data: {
5 msg: 'hi'
6 }
7})
8
9axios('/extend/post', {
10 method: 'post',
11 data: {
12 msg: 'hello'
13 }
14})
我们使用了 axios 2 种请求方式，打开页面运行 demo，通过 network 我们可以看到 2 种请求都是运行正常的。
至此我们实现了 axios 函数的重载。官方 axios 支持了一种能力，我们可以去定义返回数据的类型，并在请求的时候指定该类型，然后在响应数据中我们就可以获取到该数据类型。
响应数据支持泛型
需求分析
通常情况下，我们会把后端返回数据格式单独放入一个接口中：
1// 请求接口数据
2export interface ResponseData<T = any> {
3 /**
4 * 状态码
5 * @type { number }
6 */
7 code: number
8
9 /**
10 * 数据
11 * @type { T }
12 */
13 result: T
14
15 /**
16 * 消息
17 * @type { string }
18 */
19 message: string
20}
我们可以把 API 抽离成单独的模块：
1import { ResponseData } from './interface.ts';
2
3export function getUser<T>() {
4 return axios.get<ResponseData<T>>('/somepath')
5 .then(res => res.data)
6 .catch(err => console.error(err))
7}
接着我们写入返回的数据类型 User，这可以让 TypeScript 顺利推断出我们想要的类型：
1interface User {
2 name: string
3 age: number
4}
5
6async function test() {
7 // user 被推断出为
8 // {
9 // code: number,
10 // result: { name: string, age: number },
11 // message: string
12 // }
13 const user = await getUser<User>()
14}
接口添加泛型参数
根据需求分析，我们需要给相关的接口定义添加泛型参数。
types/index.ts：
1export interface AxiosResponse<T = any> {
2 data: T
3 status: number
4 statusText: string
5 headers: any
6 config: AxiosRequestConfig
7 request: any
8}
9
10export interface AxiosPromise<T = any> extends Promise<AxiosResponse<T>> {
11}
12
13export interface Axios {
14 request<T = any>(config: AxiosRequestConfig): AxiosPromise<T>
15
16 get<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
17
18 delete<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
19
20 head<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
21
22 options<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
23
24 post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
25
26 put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
27
28 patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>
29}
30
31export interface AxiosInstance extends Axios {
32 <T = any>(config: AxiosRequestConfig): AxiosPromise<T>
33
34 <T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>
35}
36
这里我们先给 AxiosResponse 接口添加了泛型参数 T，T=any 表示泛型的类型参数默认值为 any。
接着我们为 AxiosPromise、Axios 以及 AxiosInstance 接口都加上了泛型参数。我们可以看到这些请求的返回类型都变成了 AxiosPromise，也就是 Promise<axiosresponse>，这样我们就可以从响应中拿到了类型 T 了。
demo 编写
examples/extend/app.ts：
1interface ResponseData<T = any> {
2 code: number
3 result: T
4 message: string
5}
6
7interface User {
8 name: string
9 age: number
10}
11
12function getUser<T>() {
13 return axios<ResponseData<T>>('/extend/user')
14 .then(res => res.data)
15 .catch(err => console.error(err))
16}
17
18
19async function test() {
20 const user = await getUser<User>()
21 if (user) {
22 console.log(user.result.name)
23 }
24}
25
26test()
当我们调用 getUser的时候，相当于调用了 axios<responsedata>，也就是我们传入给 axios 函数的类型 T 为 ResponseData；相当于返回值 AxiosPromise的 T，实际上也是 Promise<axiosresponse> 中的 T 的类型是 ResponseData，所以响应数据中的 data 类型就是 ResponseData，也就是如下数据结构：
1{
2 code: number
3 result: User
4 message: string
5}
这个也是 const user = await getUser() 返回值 user 的数据类型，所以 TypeScript 能正确推断出 user 的类型。
至此，我们的 ts-axios 接口扩展章节就告一段落了，我们来实现 axios 的一个非常好用的功能 —— 拦截器。