### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

  - 处理请求 url 参数
  - 处理请求 body 数据
  - 处理请求 header
  - 获取响应数据
  - 处理响应 header
    - 需求分析
    - parseHeaders 函数实现及应用
  - 处理响应 data

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

- ts-axios 单元测试

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- ts-axios 基础功能实现

HuangYi
2020-01-05
目录

# 处理响应 header

# # 处理响应 header

## # 需求分析

我们通过 `XMLHttpRequest` 对象的 `getAllResponseHeaders` 方法获取到的值是如下一段字符串：

    date: Fri, 05 Apr 2019 12:40:49 GMT
    etag: W/"d-Ssxx4FRxEutDLwo2+xkkxKc4y0k"
    connection: keep-alive
    x-powered-by: Express
    content-length: 13
    content-type: application/json; charset=utf-8

1
2
3
4
5
6

每一行都是以回车符和换行符 `\r\n` 结束，它们是每个 `header` 属性的分隔符。对于上面这串字符串，我们希望最终解析成一个对象结构：

    {
      date: 'Fri, 05 Apr 2019 12:40:49 GMT'
      etag: 'W/"d-Ssxx4FRxEutDLwo2+xkkxKc4y0k"',
      connection: 'keep-alive',
      'x-powered-by': 'Express',
      'content-length': '13'
      'content-type': 'application/json; charset=utf-8'
    }

1
2
3
4
5
6
7
8

## # parseHeaders 函数实现及应用

根据需求分析，我们要实现一个 `parseHeaders` 工具函数。

`helpers/headers.ts`：

    export function parseHeaders(headers: string): any {
      let parsed = Object.create(null)
      if (!headers) {
        return parsed
      }

      headers.split('\r\n').forEach(line => {
        let [key, val] = line.split(':')
        key = key.trim().toLowerCase()
        if (!key) {
          return
        }
        if (val) {
          val = val.trim()
        }
        parsed[key] = val
      })

      return parsed
    }

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

然后我们使用这个工具函数：

`xhr.ts`：

    const responseHeaders = parseHeaders(request.getAllResponseHeaders())

1

接着我们再去看刚才的 demo，发现我们已经把响应的 `headers` 字段从字符串解析成对象结构了。那么接下来，我们在解决之前遗留的第二个问题：对响应 `data` 字段的处理。

编辑
(opens new window)
#TypeScript
上次更新: 2022/12/14, 19:36:42
获取响应数据
处理响应 data

← 获取响应数据 处理响应 data→

最近更新

  01
Git修改分支名
08-11

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

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

更多文章>

Copyright © 2016-2022 Hesb | MIT License

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