2-6、处理响应data

2019-12-05  本文已影响0人  Eileen_1d88
需求:

在我们不去设置responseType时,当服务端返回给我们的是字符串类型, 我们可以尝试将它转换成一个json对象,如

data: "{"a":1,"b":2}"
=>
data: {
  a: 1
  b: 2
}
实现tranformResponse方法
function transformResponse(data: any): any {
  if (typeof data === 'string') {
    try {
      data = JSON.parse(data)
    } catch(e) {
      // do nothing
    }
  }
  return data
}

src/xhr.ts

import { AxiosRequestConfig, AxiosPromise, AxiosResponse } from "./types";
import { parseHeaders } from "./helpers/headers";
import { transformResponse } from "./helpers/data";

export default function xhr(config: AxiosRequestConfig): AxiosPromise {
  return new Promise((resolve, reject) => {
    // method和data可能没有, 所以给出默认值
    const { url, method = 'get', data = null, headers, responseType } = config
    const request = new XMLHttpRequest()
    if (responseType) {
      request.responseType = responseType
    }
    request.open(method.toUpperCase(), url)
    request.onreadystatechange = function handleLoad() {
      // request.readyState不是4,说明请求还未返回
      if (request.readyState !== 4) {
        return
      }
      const responseHeaders = request.getAllResponseHeaders()
      const responseData = responseType && responseType !== 'text' ? request.response : request.responseText
      const response: AxiosResponse = {
        data: transformResponse(responseData),
        headers: parseHeaders(responseHeaders),
        status: request.status,
        statusText: request.statusText,
        config,
        request
      }
      resolve(response)
    }
    Object.keys(headers).forEach((name) => {
      request.setRequestHeader(name, headers[name])
    })
    request.send(data)
  })

}

我们再去看上一节的demo,发现返回值是json对象。到此为止,基础功能实现完毕,但是异常情况没有进行处理,接下来,我们继续完善。

上一篇 下一篇

猜你喜欢

热点阅读