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

最新推荐文章于 2024-03-25 18:12:22 发布
原创 最新推荐文章于 2024-03-25 18:12:22 发布 · 5.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#重构 #javascript #前端 #typescript #axios

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

获取响应数据

设定返回数据类型

XMLHttpRequest.responseType

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

采用的值：

  • ""

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

  • arraybuffer

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

  • json

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

  • …

注意

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

请求状态

XMLHttpRequest.readyState

  • 返回一个XMLHttpRequest代理当前所处的状态
最低0.47元/天 解锁文章
TS封装axios并约束请求参数以及响应的类型
owo_ovo的博客
04-07 3673
TS封装axios并约束请求参数以及响应的类型
ts + axios封装
c_liufeng的博客
10-23 3703
https.ts文件 /** * @author 作者 * @time 2020-9-27 8:47 * @title http请求封装 * desc 前后端约定接口返回解构规范 * { * code: '1', * data:" 请求成功", * message: "" * } */ import { Interceptor } from './interceptor'; import { message, Modal } from 'ant-design
axios获取的数据怎么渲染到页面上
m0_67823704的博客
05-13 1612
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据显示</title> </head> <body> <div id="app"> <button type="button" @click="getAllStu...
axios（3）——使用axios发送请求获取到的response对象属性分析
木子 旭的博客
03-08 9037
1.返回的response属性截图 2.config config是配置对象 3.data 响应体，服务器返回的结果。axios自动将返回的结果进行json解析，把他转化成为一个json对象 4.headers 响应头信息 5.request 原生的ajax请求对象，XMLHttpRequest对象 6. status 响应状态码 7.statusText 响应状态字符串 ...
【愚公系列】2022年05月 vue3系列 axios请求的封装（TS版）
热门推荐
时光隧道
05-19 1万+
文章目录前言1.axios介绍2.vue-axios介绍一、axios请求的封装（TS版）1.JwtService2.ApiService3.使用4.axios配置详解4.1 url（必写）4.2 method4.3 baseURL（常用）4.4 transformRequest4.5 transformResponse4.6 headers（常用，如设置请求头json类型）4.7 params（常用，只有get请求设置params，其他请求需设置params,即只有get的请求参数位于url后，其他请求参
Vue3中Axios封装与Vite跨域配置实战
此外，还可以扩展 Axios 的返回类型定义，利用 TypeScript 的优势为响应数据添加泛型支持，例如定义 `Response<T>` 接口，使得调用方可以明确知道返回数据结构，提升类型安全性和开发体验。 接下来是跨域问题的解析...
面试题（四）——高级
weixin_43799793的博客
08-10 366
面试题（四）——高级 vue数组响应式原理 闭包的使用场景 Vue中computed和watch的区别 Vue 正确理解mounted、beforeUpdate、updated三个钩子函数的关系 vue中keepAlive的使用，如何刷新 vue中的插槽–slot和v-slot CSS 动画 vue中mixins的理解及应用 content-type的作用以及类型 Vue中的nextTick作用和几个简单的使用场景 setTime(() =>{ },0) ,
基于Vue3+TS+Vite的花木兰前端管理框架
充分利用了Vue3在响应式系统上的重大升级——基于Proxy的全新响应式机制，相较于Vue2的Object.defineProperty，Proxy能够更全面地监听对象属性的增删改查操作，极大提升了数据劫持的效率与灵活性。同时，Vue3引入的...
Content-Type踩坑实录：解决ESP32前后端数据格式不匹配的5种策略
`Content-Type` 是 HTTP 协议中用于标识请求或响应体数据格式的关键头部字段，它直接影响前后端对数据的解析方式。常见类型如 `application/json`、`application/x-www-form-urlencoded` 和 `multipart/form-data` ...
axios请求本地资源 response报错undefined ts(2532)
ProgrammingWhite的博客
08-29 2028
axios response undefined
TS报错:类型“AxiosResponse＜any, any＞”上不存在属性“XXX”。
m0_66592433的博客
09-06 6051
今天在项目中遇到一个问题，在调用后台接口时，TS报错：类型“AxiosResponse”上不存在属性“rows”
TS 请求接口获取数据写法1
jieweiwujie的博客
03-25 333
【代码】TS 请求接口获取数据写法1。
基于 TS 实现 axios（三）
qq_43389371的博客
04-28 503
这一小节，主要是把异常的处理加上 处理错误 网络错误 就在你发送 Ajax 请求的地方，new 出来的 XMLHttpRequest 有一个 onerror 的方法，把你的方法挂上去就可以了。 request.onerror = function handleError() { reject(new Error('Network Error')); } 超时错误 同样的，在new 出来...
如何配置axios才能让返回值直接能获取到data，而不是response.data.data？
LRQQHM的博客
11-22 1429
axios 拦截器中response配置返回“return res.data;
【前端杂文】 axios的AxiosResponse分析
baidu_36831253的博客
11-09 7534
axios的AxiosResonse分析
在项目中用TS封装axios，一次封装团队受益
guxin_duyin的博客
05-23 548
写在前面 虽然说Fetch API已经使用率已经非常的高了，但是在一些老的浏览器还是不支持的，而且axios仍然每周都保持2000多万的下载量，这就说明了axios仍然存在不可撼动的地位，接下来我们就一步一步的去封装，实现一个灵活、可复用的一个请求请发。 这篇文章封装的axios已经满足如下功能： 无处不在的代码提示； 灵活的拦截器； 可以创建多个实例，灵活根据项目进行调整； 每个实例，或者说每个接口都可以灵活配置请求头、超时时间等； 取消请求（可以根据url取消单个请求也可以取消全部请求） 基础封装
响应数据支持泛型
Geordies的博客
01-05 537
# 响应数据支持泛型 # 需求分析 通常情况下，我们会把后端返回数据格式单独放入一个接口中： // 请求接口数据 export interface ResponseData<T = any> { /** * 状态码 * @type { number } */ code: number /** * 数据 * @type { T } */ ...
axios的response.data
weixin_44325325的博客
06-30 7438
今天开发时，使用axios返回的response中data有多个数据： 如果是获取cn里的数据的，可以用： response.data.cn 1 但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key: 假设need是需要获取的某个key const dkey = this.need; response.data.dkey 1 2 3 这样发现获取不到数据，这是因为vue.js把dkey当成data里的某一个key了，类似于上面的"cn"。 折腾了很久才突然想起，这个d
TS--axios在ts中的使用
Anorry的博客
07-15 1152
使用Axios提供的方法（get、post等）去发送网络请求。方法中使用类型断言或类型推断来获取数据的类型并进行相关的操作。在上面的代码中，使用泛型。声明了响应数据的类型。
ts 对axios响应数据进行类型判断封装
最新发布
09-23
在TypeScript (TS) 中，为了对 Axios 响应的数据进行类型安全的处理并封装，你可以创建一个自定义的函数或者模块，结合 Axios 的 `response` 属性和 TypeScript 的类型系统。以下是一个简单的例子： ```typescript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值