TS重构axios——获取响应数据

最新推荐文章于 2024-04-07 17:34:51 发布

TA_WORLD

最新推荐文章于 2024-04-07 17:34:51 发布

阅读量5.3k

点赞数 1

分类专栏： axios 文章标签：重构 javascript 前端 typescript axios

本文链接：https://blog.csdn.net/qq_56303170/article/details/123527105

版权

axios 专栏收录该内容

5 篇文章

订阅专栏

这篇博客探讨了如何在JavaScript中使用XMLHttpRequest设置返回数据类型，并监听请求状态来处理响应。文章详细介绍了responseType属性的不同值，如arraybuffer和json，以及如何根据配置的responseType设置请求。同时，讲解了如何通过onreadystatechange事件处理函数获取并解析响应数据，最终将xhr函数返回值改为Promise类型，以适应现代异步编程需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取响应数据

设定返回数据类型

XMLHttpRequest.responseType

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

采用的值：

""

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

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

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

注意

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

请求状态

XMLHttpRequest.readyState

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

值	状态	描述
0	UNSENT	代理被创建，但是尚未调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，且头部和状态已经可获得
3	LOADING	下载中，responseText属性已经包含部分数据
4	DONE	下载操作已经完成

监听请求状态

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)
}