前言
本系列将从零开始,系统性地介绍 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 防护功能。