### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

  - withCredentials
  - XSRF 防御
  - 上传和下载的进度监控
  - HTTP 授权
  - 自定义合法状态码
  - 自定义参数序列化
  - baseURL
    - 需求分析
    - 代码实现
    - demo 编写
  - 静态方法扩展

- ts-axios 单元测试

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- ts-axios 更多功能实现

HuangYi
2020-01-05
目录

# baseURL

# # baseURL

## # 需求分析

有些时候，我们会请求某个域名下的多个接口，我们不希望每次发送请求都填写完整的 url，希望可以配置一个 `baseURL`，之后都可以传相对路径。如下：

    const instance = axios.create({
      baseURL: 'https://some-domain.com/api'
    })

    instance.get('/get')

    instance.post('/post')

1
2
3
4
5
6
7

我们一旦配置了 `baseURL`，之后请求传入的 `url` 都会和我们的 `baseURL` 拼接成完整的绝对地址，除非请求传入的 `url` 已经是绝对地址。

## # 代码实现

首先修改一下类型定义。

`types/index.ts`：

    export interface AxiosRequestConfig {
      // ...
      baseURL?: string
    }

1
2
3
4

接下来实现 2 个辅助函数。

`helpers/url.ts`：

    export function isAbsoluteURL(url: string): boolean {
      return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
    }

    export function combineURL(baseURL: string, relativeURL?: string): string {
      return relativeURL ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '') : baseURL
    }

1
2
3
4
5
6
7

最后我们来调用这俩个辅助函数。

`core/dispatchRequest.ts`：

    function transformURL(config: AxiosRequestConfig): string {
      let { url, params, paramsSerializer, baseURL } = config
      if (baseURL && !isAbsoluteURL(url!)) {
        url = combineURL(baseURL, url)
      }
      return buildURL(url!, params, paramsSerializer)
    }

1
2
3
4
5
6
7

## # demo 编写

    const instance = axios.create({
      baseURL: 'https://img.mukewang.com/'
    })

    instance.get('5cc01a7b0001a33718720632.jpg')

    instance.get('https://img.mukewang.com/szimg/5becd5ad0001b89306000338-360-202.jpg')

1
2
3
4
5
6
7

这个 demo 非常简单，我们请求了慕课网的 2 张图片，注意当第二个请求 `url` 已经是绝对地址的时候，我们并不会再去拼接 `baseURL`。

至此，`ts-axios` 就实现了 `baseURL` 的配置功能，接下来我们来实现 `ts-axios` 的静态方法扩展。

编辑
(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

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