### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

  - 合并配置的设计与实现
  - 请求和响应配置化
  - 扩展 create 静态接口
    - 需求分析
    - 静态方法扩展
    - demo 编写

- ts-axios 取消功能实现

- ts-axios 更多功能实现

- ts-axios 单元测试

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- ts-axios 配置化实现

HuangYi
2020-01-05
目录

# 扩展 create 静态接口

# # 扩展 axios.create 静态接口

## # 需求分析

目前为止，我们的 axios 都是一个单例，一旦我们修改了 axios 的默认配置，会影响所有的请求。我们希望提供了一个 `axios.create` 的静态接口允许我们创建一个新的 `axios` 实例，同时允许我们传入新的配置和默认配置合并，并做为新的默认配置。

举个例子：

    const instance = axios.create({
      transformRequest: [(function(data) {
        return qs.stringify(data)
      }), ...(axios.defaults.transformRequest as AxiosTransformer[])],
      transformResponse: [...(axios.defaults.transformResponse as AxiosTransformer[]), function(data) {
        if (typeof data === 'object') {
          data.b = 2
        }
        return data
      }]
    })

    instance({
      url: '/config/post',
      method: 'post',
      data: {
        a: 1
      }
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

## # 静态方法扩展

由于 `axios` 扩展了一个静态接口，因此我们先来修改接口类型定义。

`types/index.ts`：

    export interface AxiosStatic extends AxiosInstance{
      create(config?: AxiosRequestConfig): AxiosInstance
    }

1
2
3

`create` 函数可以接受一个 `AxiosRequestConfig` 类型的配置，作为默认配置的扩展，也可以接受不传参数。

接着我们来实现 `axios.create` 静态方法。

`axios.ts`：

    function createInstance(config: AxiosRequestConfig): AxiosStatic {
      const context = new Axios(config)
      const instance = Axios.prototype.request.bind(context)

      extend(instance, context)

      return instance as AxiosStatic
    }
    axios.create = function create(config) {
      return createInstance(mergeConfig(defaults, config))
    }

1
2
3
4
5
6
7
8
9
10
11

内部调用了 `createInstance` 函数，并且把参数 `config` 与 `defaults` 合并，作为新的默认配置。注意这里我们需要 `createInstance` 函数的返回值类型为 `AxiosStatic`。

## # demo 编写

    const instance = axios.create({
      transformRequest: [(function(data) {
        return qs.stringify(data)
      }), ...(axios.defaults.transformRequest as AxiosTransformer[])],
      transformResponse: [...(axios.defaults.transformResponse as AxiosTransformer[]), function(data) {
        if (typeof data === 'object') {
          data.b = 2
        }
        return data
      }]
    })

    instance({
      url: '/config/post',
      method: 'post',
      data: {
        a: 1
      }
    }).then((res) => {
      console.log(res.data)
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我们对上节课的示例做了小小的修改，通过 `axios.create` 方法创建一个新的实例 `instance`，并传入了 `transformRequest` 和 `transformResponse` 的配置修改了默认配置，然后通过 `instance` 发送请求，效果和之前是一样的。

至此我们实现了 `axios.create` 静态接口的扩展，整个 `ts-axios` 的配置化也告一段落。官方 axios 库还支持了对请求取消的能力，在发送请求前以及请求发送出去未响应前都可以取消该请求。下一章我们就来实现这个 feature。

编辑
(opens new window)
#TypeScript
上次更新: 2022/12/14, 19:36:42
请求和响应配置化
取消功能的设计与实现

← 请求和响应配置化 取消功能的设计与实现→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式