三、实现promise化调用

在平常我们使用axios的时候，会很喜欢它的promise调用的方式，那么杂这章，我们就来实现promise化的调用。

要使用Promise化的调用，我们就得返回让xhr对象发送请求之后，返回的是Promise格式的返回值。

一、我们在/src/types/index.ts中新增AxiosPromise类型。

export interface AxiosPromise extends Promise<AxiosResponse> {}

二、修改xhr对象，使它返回一个Promise对象

文件位置 /src/xhr.ts

export default function xhr(config: AxiosRequestConfig): AxiosPromise {
  return new Promise(resolve => {
...
...
...
 request.onreadystatechange = function handleLoad() {
      if (request.readyState !== 4) {
        return
      }
      const responseHeaders = parseHeaders(request.getAllResponseHeaders())
      const responseData = responseType !== 'text' ? request.response : request.responseText
      const response: AxiosResponse = {
        data: responseData,
        status: request.status,
        statusText: request.statusText,
        headers: responseHeaders,
        config,
        request
      }
      resolve(response)
    }
...
...
...

有修改的地方，已经贴出来了，主要有三处地方做了修改。
第一：给xhr函数添加了返回值类型 AXiosPromise
第二：整个函数返回Promise对象
第三：在成功获取数据之后，使用resolve(response)调用。

三、修改axios构造函数，是他返回Promise对象

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

需要注意的是Promise.then()返回的依然是Promise对象。