32 axios封装

本文详细介绍了axios的错误封装方式,包括函数回调和Promise的使用,并探讨了axios的请求和响应拦截器。在请求拦截中,可以预先处理数据;响应拦截则允许在返回给后续代码前进行数据整理。此外,还分享了axios的封装代码和配置,以及为何需要使用拦截器进行请求管理和错误处理。
摘要由CSDN通过智能技术生成

错误使用

在这里插入图片描述
在这里插入图片描述

封装axios

函数方式[回调]

在这里插入图片描述
顺序:传入(函数传入[不带括号]就相当于把地址传进去了)–> 调用(加了括号相当于调用)–> 回调(又会根据地址反过来执行)

一个参数[回调]

在这里插入图片描述
就是把上面的写到了一起,没什么特别的

promise方式

在这里插入图片描述
promise对象包住了什么异步操作,该异步操作就变成了promise对象,而返回什么值是靠resolve和reject来决定的,例如:多层的Ajax请求,就在最外面包裹promise就行,返回什么就看你需要什么!

axios封装

在这里插入图片描述

拦截器

在这里插入图片描述
上面request是请求拦截,下面response是响应拦截!

请求拦截注意

在这里插入图片描述
请求拦截表示还没有开始请求之前,即:发送请求出去之前。可以对数据先进行整理,再来请求

config打印结果:
在这里插入图片描述

响应拦截注意

在这里插入图片描述
响应拦截表示响应后,但是没有执行响应后的代码的这段时间。也是可以先整理,再来返回给后面的代码,例如:可以每次请求更新token !

res打印结果:
在这里插入图片描述

为什么需要拦截

在这里插入图片描述

axios封装代码和配置

封装后的代码以及配置见:vue3+eslint(推荐配置)|prettier+elementplus+国际化+axios封装+pinia

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PBitW

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值