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

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

本章主要是以记录为主。


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


// 引入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 客户端实例,并添加请求和响应的拦截器。下面是对代码的详细解析:


引入 axios


import axios from "axios";

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


创建 axios 实例


const instance = axios.create();

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


请求拦截器


instance.interceptors.request.use( 
function (config) { 
// 在发送请求之前做些什么 
return config; 
}, 
function (error) { 
// 对请求错误做些什么 
return Promise.reject(error); 
} 
);

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


  • 第一个回调函数:接收一个配置对象 config 作为参数。在这个函数里,你可以修改请求的配置(例如添加 headers、params 等),或者直接返回这个配置对象。
  • 第二个回调函数:用于处理请求错误。如果请求在发送之前发生错误(例如因为配置不正确),这个函数会被调用。这里,它只是简单地将错误包装成一个 Promise 并拒绝它。

响应拦截器


instance.interceptors.response.use( 
function (response) { 
// 对响应数据做点什么 
return response.data; 
}, 
function (error) { 
// 对响应错误做点什么 
return Promise.reject(error); 
} 
);

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


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


    1.导出实例


export default instance;

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


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


相关文章
|
17天前
|
API
使用axios发送请求的格式是什么?示例代码
使用axios发送请求的格式是什么?示例代码
14 0
|
17天前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
13 0
|
1月前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
18 0
|
1月前
|
前端开发
axios拦截器的使用?
axios拦截器的使用?
18 0
|
1月前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
22 0
|
1月前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
223 0
|
1月前
|
XML JavaScript 前端开发
axios如何在vue中使用
axios如何在vue中使用
38 1
|
28天前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
1月前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
1月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件