### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

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

- ts-axios 单元测试

- ts-axios 部署与发布

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

HuangYi
2020-01-05
目录

# 自定义合法状态码

# # 自定义合法状态码

## # 需求分析

之前 `ts-axios` 在处理响应结果的时候，认为 HTTP status
(opens new window) 在 200 和 300 之间是一个合法值，在这个区间之外则创建一个错误。有些时候我们想自定义这个规则，比如认为 304 也是一个合法的状态码，所以我们希望 `ts-axios` 能提供一个配置，允许我们自定义合法状态码规则。如下：

    axios.get('/more/304', {
      validateStatus(status) {
        return status >= 200 && status < 400
      }
    }).then(res => {
      console.log(res)
    }).catch((e: AxiosError) => {
      console.log(e.message)
    })

1
2
3
4
5
6
7
8
9

通过在请求配置中配置一个 `validateStatus` 函数，它可以根据参数 `status` 来自定义合法状态码的规则。

## # 代码实现

首先修改一下类型定义。

`types/index.ts`：

    export interface AxiosRequestConfig {
      // ...
      validateStatus?: (status: number) => boolean
    }

1
2
3
4

然后我们来修改默认配置规则。

`defaults.ts`：

    validateStatus(status: number): boolean {
      return status >= 200 && status < 300
    }

1
2
3

添加默认合法状态码的校验规则。然后再请求后对响应数据的处理逻辑。

`core/xhr.ts`：

    const {
      /*...*/
      validateStatus
    } = config

    function handleResponse(response: AxiosResponse): void {
      if (!validateStatus || validateStatus(response.status)) {
        resolve(response)
      } else {
        reject(
          createError(
            `Request failed with status code ${response.status}`,
            config,
            null,
            request,
            response
          )
        )
      }
    }

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

如果没有配置 `validateStatus` 以及 `validateStatus` 函数返回的值为 true 的时候，都认为是合法的，正常 `resolve(response)`，否则都创建一个错误。

## # demo 编写

    axios.get('/more/304').then(res => {
      console.log(res)
    }).catch((e: AxiosError) => {
      console.log(e.message)
    })

    axios.get('/more/304', {
      validateStatus(status) {
        return status >= 200 && status < 400
      }
    }).then(res => {
      console.log(res)
    }).catch((e: AxiosError) => {
      console.log(e.message)
    })

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

`server.js` 中我们编写了这个路由接口

    router.get('/more/304', function(req, res) {
      res.status(304)
      res.end()
    })

1
2
3
4
5

接口返回 304 状态码，对于默认的请求我们会输出一条错误信息。第二个请求中我们配置了自定义合法状态码规则，区间在 200 和 400 之间，这样就不会报错，而是可以正常输出响应对象。

至此 `ts-axios` 实现了自定义合法状态码功能，用户可以配置 `validateStatus` 自定义合法状态码规则。之前有同学会质疑 `ts-axios` 对于请求 `url` 参数的序列化处理规则，下一节课我们来实现自定义参数序列化规则功能。

编辑
(opens new window)
#TypeScript
上次更新: 2022/12/14, 19:36:42
HTTP 授权
自定义参数序列化

← HTTP 授权 自定义参数序列化→

最近更新

  01
Git修改分支名
08-11

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

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

更多文章>

Copyright © 2016-2022 Hesb | MIT License

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