### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

- ts-axios 异常情况处理

- ts-axios 接口扩展

  - 扩展接口
  - axios 函数重载
    - 需求分析
    - 重载实现
    - 编写 demo
  - 响应数据支持泛型

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

- ts-axios 单元测试

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- ts-axios 接口扩展

HuangYi
2020-01-05
目录

# axios 函数重载

# # axios 函数重载

## # 需求分析

目前我们的 axios 函数只支持传入 1 个参数，如下：

    axios({
      url: '/extend/post',
      method: 'post',
      data: {
        msg: 'hi'
      }
    })

1
2
3
4
5
6
7

我们希望该函数也能支持传入 2 个参数，如下：

    axios('/extend/post', {
      method: 'post',
      data: {
        msg: 'hello'
      }
    })

1
2
3
4
5
6

第一个参数是 `url`，第二个参数是 `config`，这个函数有点类似 `axios.get` 方法支持的参数类型，不同的是如果我们想要指定 HTTP 方法类型，仍然需要在 `config` 传入 `method`。

这就用到我们之前所学的函数重载知识点了，接下来我们来实现它。

## # 重载实现

首先我们要修改 `AxiosInstance` 的类型定义。

`types/index.ts`：

    export interface AxiosInstance extends Axios {
      (config: AxiosRequestConfig): AxiosPromise

      (url: string, config?: AxiosRequestConfig): AxiosPromise
    }

1
2
3
4
5

我们增加一种函数的定义，它支持 2 个参数，其中 `url` 是必选参数，`config` 是可选参数。

由于 `axios` 函数实际上指向的是 `request` 函数，所以我们来修改 `request` 函数的实现。

`core/Axios.ts`：

      request(url: any, config?: any): AxiosPromise {
        if (typeof url === 'string') {
          if (!config) {
            config = {}
          }
          config.url = url
        } else {
          config = url
        }
        return dispatchRequest(config)
      }

1
2
3
4
5
6
7
8
9
10
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`：

    axios({
      url: '/extend/post',
      method: 'post',
      data: {
        msg: 'hi'
      }
    })

    axios('/extend/post', {
      method: 'post',
      data: {
        msg: 'hello'
      }
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14

我们使用了 `axios` 2 种请求方式，打开页面运行 `demo`，通过 network 我们可以看到 2 种请求都是运行正常的。

至此我们实现了 `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

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