处理响应 header

需求分析

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

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

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

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

parseHeaders 函数实现及应用

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

helpers/headers.ts：

  1. export function parseHeaders(headers: string): any {
  2.   let parsed = Object.create(null)
  3.   if (!headers) {
  4.     return parsed
  5.   }
  7.   headers.split('\r\n').forEach(line => {
  8.     let [key, val] = line.split(':')
  9.     key = key.trim().toLowerCase()
  10.     if (!key) {
  11.       return
  12.     }
  13.     if (val) {
  14.       val = val.trim()
  15.     }
  16.     parsed[key] = val
  17.   })
  19.   return parsed
  20. }

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

xhr.ts：

  1. const responseHeaders = parseHeaders(request.getAllResponseHeaders())

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