vue-axios拦截器
axios还提供了拦截器的功能,他的拦截器是用拦截 请求和响应的,说简单是:请求到服务器前拦截 和 响应到客户端前拦截。
之前我们在request.js封装了一些代码,如下:
import axios from 'axios' export function request(config){ //配置axios实例通用配置 const instance1 = axios.create({ baseURL: 'http://httpbin.org', timeout: 5000 }) return instance1(config) }
实际上这个封装还不完整,通常还会再这里加拦截器的,如下:
import axios from 'axios' export function request(config){ //1. 配置axios实例通用配置 const instance1 = axios.create({ baseURL: 'http://httpbin.org', timeout: 5000 }) //2. 配置拦截器 //配置请求拦截器 instance1.interceptors.request.use(config => { //请求拦截成功,会进入这里;注意这里的config不是上面参数config,这里的config是最终的请求配置项,包括baseURL,url,method,timeout /** * 常用拦截后的处理: * 1. 拦截config中一些不符合服务器要求的配置,并修改这些配置 * 2. 一般请求成功后,数据不会马上返回,可以在这里显示一个正在加载的图标等 * 3. 当需要某个请求必须携带token时,可以在这里进行判断 */ console.log('我拦截成功了') return config //要返回出去,如果没有返回出去,则代表拦截掉这个请求 },err => { //请求失败执行这里,这里不是拦截失败,是请求失败会进入这里 }) //配置响应拦截器 instance1.interceptors.response.use(result => { //响应成功进入这里;result是服务器响应的结果 return result.data //这里通常是需要返回的,如果不返回代表发送请求的地方拿不到数据,还有很多时候不直接返回result的,因为最需要的其实是result的data数据 },err => { //响应失败会进入这里 }) //3. 发送请求 return instance1(config) }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~