「从零开始的 Vue 3 系列」：第八章——深入解析 Axios 与拦截器的使用与封装
前言
本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。
Axios
Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js。它提供了一系列功能，使得在 JavaScript 应用中发起 HTTP 请求变得简单和高效。
项目中搭建
使用 npm 或 yarn 安装 Axios：
npm install axios
# 或者
yarn add axios
发送get\post请求
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
axios.post('https://api.example.com/data', {
key1: 'value1',
key2: 'value2'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
拦截器
在 Vue 3 中，拦截器主要应用于 HTTP 请求和响应的处理，通常与 axios 结合使用。拦截器的作用是对请求和响应在发送或接收前进行预处理，常见的功能包括：添加全局的请求头、处理请求错误、统一处理响应数据和错误等。通过拦截器，我们可以在不修改业务代码的情况下，轻松实现这些功能。
Vue 3 中的常见拦截器功能包括：
- 请求拦截器：在请求发送前，可以对请求配置进行修改，如添加 token，或进行参数的统一处理。
- 响应拦截器：在收到响应后，可以对响应数据进行处理，或统一处理错误，提升代码的复用性。
拦截器常用于以下场景：
- 身份验证：自动为每个请求添加身份验证 token。
- 全局错误处理：捕获所有请求错误并集中处理。
- 据预处理：对响应数据进行格式化，简化业务逻辑。
实现封装优化：
新建文件utils,目录下新建request.js文件
import axios from 'axios';
// 创建axios实例
const service = axios.create({
//设置请求路径
//这里设置后端服务的端口号
baseURL："http://localhost:8080"
//接口响应时间
timeout：1000
})
//请求拦截器
service .interceptors.request.use(config => {
// 在请求发送之前做些什么
//config.headers是请求头，可以在这里携带token等等数据
config.headers.Authorization = 'Bearer YOUR_TOKEN';
return config;
}, error => {
// 处理请求错误
return Promise.reject(error);
});
//响应拦截器
service .interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 处理响应错误
return Promise.reject(error);
});
//将axios暴露出去
export default service
新建api.js文件，用于封装接口
//引入封装的axios
impor service from "../request"
//新建接口
const getList =()=>service.get("这里是你的接口请求",{params}//这里是携带的参数)
//将接口暴露出去，正常调用就行
export default{
getList
}
Axios总结
- Axios 基于 Promise 设计，支持异步请求处理，非常适合现代 JavaScript 应用。
- 请求和响应拦截器：可以在请求或响应被 then 或 catch 处理前进行拦截和修改。
- 自动转换 JSON 数据：自动将请求和响应的数据格式转换为 JSON。
- 取消请求：支持请求取消功能。
- 客户端支持防御 XSRF：提供 XSRF 防护功能。
ps:以上内容仅为本人对 vue3的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。
原文地址：https://blog.csdn.net/llfxq/article/details/142878304
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！