需求分析

前一节，由于返回的 res 响应对象中的 header 是一个字符串，这是因为通过 XMLHttpRequest 对象中的 getAllResponseHeaders 方法获取到的值是如下的一段字符串：

headers: "connection: keep-alive\r\ncontent-length: 13\r\ncontent-type: application/json; charset=utf-8\r\ndate: Sat, 11 Jun 2022 08:02:53 GMT\r\netag: W/\"d-talgBZSHcQOay+ud5zDrtp+2VNk\"\r\nkeep-alive: timeout=5\r\nx-powered-by: Express\r\n"

最终希望能攻获取到上面这个字符串解析为一个对象结构。

parseHeaders 函数实现及应用

在 src/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
}

使用字符串的方法，处理 headers 字符串。

然后使用 src/xhr.ts 使用这个工具函数：

const responseHeaders = parseHeaders(request.getAllResponseHeaders())

此时，再运行上一节的 DEMO，可以看到返回的响应对象中的 headers 为一个对象了。

需求分析

在没有设置 responseType 的情况下，当字符串反应的数据是一个对象字符串吗，可以转换为一个 JSON 对象：

data: "{\"a\":1,\"b\":2}"

转换为：

data: {
  a: 1,
  b: 2
}

transformResponse 函数实现以及应用

在 helpers/data.ts 中：

export function transformResponse(data: any): any {
  if(typeof data === 'string') {
    try {
      data = JSON.parse(data)
    } catch (e) {
      // do nothing
    }
  }
  
  return data
}

在 src/index.ts 中：

function axios(config: AxiosRequestConfig): AxiosPromise {
  processConfig(config)
  return xhr(config).then(res => {
    return transformResponseData(res)
  })
}

// ... 

function transformResponseData(res: AxiosResponse): AxiosResponse {
  res.data = transformResponse(res.data)
  return res
}

此处处理了响应的数据的类型。如果为字符串，则使用 JSON 转换为对象。