vue3中axios添加请求和响应的拦截器

本章主要是以记录为主。

在src创建一个utils文件夹,并在utils中创建一个request.js文件。

javascript 复制代码
// 引入axios
import axios from "axios";
// import qs from "qs";
// 创建axios实例
const instance = axios.create();
// 请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
// 导出实例
export default instance;

这段代码主要是使用 axios 来创建一个 HTTP 客户端实例,并添加请求和响应的拦截器。下面是对代码的详细解析:

  1. 引入 axios
javascript 复制代码
import axios from "axios";

这一行从 axios 包中引入 axios 对象。axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js。

  1. 创建 axios 实例
javascript 复制代码
const instance = axios.create();

使用 axios.create() 方法创建一个新的 axios 实例。这样做的好处是,你可以为这个特定的实例添加拦截器、配置默认值等,而不会影响到其他使用 axios 的地方。

  1. 请求拦截器
javascript 复制代码
instance.interceptors.request.use( 
function (config) { 
// 在发送请求之前做些什么 
return config; 
}, 
function (error) { 
// 对请求错误做些什么 
return Promise.reject(error); 
} 
);

请求拦截器会在请求被发送之前执行。这里有两个回调函数:

  • 第一个回调函数:接收一个配置对象 config 作为参数。在这个函数里,你可以修改请求的配置(例如添加 headers、params 等),或者直接返回这个配置对象。
  • 第二个回调函数:用于处理请求错误。如果请求在发送之前发生错误(例如因为配置不正确),这个函数会被调用。这里,它只是简单地将错误包装成一个 Promise 并拒绝它。
  1. 响应拦截器
javascript 复制代码
instance.interceptors.response.use( 
function (response) { 
// 对响应数据做点什么 
return response.data; 
}, 
function (error) { 
// 对响应错误做点什么 
return Promise.reject(error); 
} 
);

响应拦截器会在响应被处理之前执行。同样,这里也有两个回调函数:

  • 第一个回调函数:接收一个响应对象 response 作为参数。在这个函数里,你可以处理响应数据(例如提取数据、转换数据格式等),并返回处理后的结果。这里,它只是简单地返回响应体(response.data)。
  • 第二个回调函数:用于处理响应错误。如果请求成功发送但服务器返回了错误(例如 404、500 等状态码),这个函数会被调用。这里,它只是简单地将错误包装成一个 Promise 并拒绝它。
  1. 导出实例
javascript 复制代码
export default instance;

最后,将创建的 axios 实例导出,以便在其他模块中使用。

总结:这段代码创建了一个自定义配置的 axios 实例,并为其添加了请求和响应的拦截器。这样做可以更方便地管理和处理 HTTP 请求和响应。

相关推荐
Jasmin Tin Wei21 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码29 分钟前
Spring Task 定时任务
java·前端·spring
猿榜29 分钟前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队30 分钟前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark23835 分钟前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia39 分钟前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia41 分钟前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华41 分钟前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
随笔记42 分钟前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
原生高钙44 分钟前
LLM大模型对话框实践:大文件的分片上传
前端