[JavaScript知识库]TS重构axios——获取响应数据

获取响应数据

设定返回数据类型

XMLHttpRequest.responseType

• 一个枚举字符串值，用于指定相应中包含的数据类型
• 它允许作者更改响应类型。如果responseType的值设置为空字符串，则会使用text作为默认值

采用的值：

• ""

  空的responseType字符串与默认的text相同

• arraybuffer

  response是一个包含二进制数据的 JavaScript ArrayBuffer。

• json

  response是通过接收到的数据内容解析为JSON而创建的JavaScript队形

• …

注意

将 responseType 设置为特定值时，作者应确保服务器实际发送的响应与该格式兼容。如果服务器返回的数据与设置的 responseType 不兼容，则 response 的值将为null

请求状态

XMLHttpRequest.readyState

• 返回一个XMLHttpRequest代理当前所处的状态

监听请求状态

XMLHttpRequest.onreadystatechange

只要readyState属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用

var xhr = new XMLHttpRequest()

xhr.onreadyStatechange = function() {
    .....// 处理过程
}

定义类型

// 返回数据的类型
export interface AxiosResponse {
    data: any
    status:number,
    statusText:string
    headers:any
    config:AxiosRequestConfig
    request:any
}

// 返回数据的promise类型
export interface AxiosPromise extends Promise<AxiosResponse> {}

修改xhr函数

将xhr函数的返回类型改为promise类型

 export default function xhr (config : AxiosRequestConfig) : AxiosPromise {
     return new Promise((resolve) => {
         ....
         resolve(xxx)
     })
 }

设定返回数据类型

从请求参数中获取responseType

const {responseType} = config 

如果请求参数中设定了responseType，那么就直接设定为返回数据类型

if (responseType) {
    request.responseType = responseType
}

监听请求状态并返回数据

• 监听请求状态
  • 如果状态不为4，则证明请求还未发送，直接退出
  • 状态为4，获取相关数据
• 通过resolev()返回数据

        request.onreadystatechange = function handleLoad () {
            if (request.readyState !== 4) {
                return
            }
            // 获取response的Headers
            const responseHeaders = request.getAllResponseHeaders()
            // 获取response的data
            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)
        }

修改axios函数

将axios函数的返回类型转变为AxiosPromise，即Promise类型

function axios(config : AxiosRequestConfig) : AxiosPromise{
    processConfig(config)
    return xhr(config)
}