Vue3与Axios(Ajax)知识点详解
编程小白的Axios完全指南
1什么是Axios?
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
大白话解释： Axios 是一个专门用来发送 HTTP 请求的工具，类似于浏览器自带的 fetch API，但功能更强大，使用更方便。
✓ 浏览器支持
可以在所有现代浏览器中运行，包括IE11等
✓ Promise API
使用Promise处理异步操作，避免”回调地狱”
✓ 请求/响应拦截
可以在发送请求前和收到响应后添加自定义处理
✓ 自动转换数据
自动将请求数据和响应数据转换为JSON格式
✓ 客户端防御XSRF
内置跨站请求伪造(XSRF)防御机制
✓ 取消请求
支持取消正在进行的HTTP请求
2安装Axios
在Vue3项目中使用Axios，首先需要安装它：
bash
npm install axios # 或者 yarn add axios
安装完成后，在Vue组件中引入Axios：
JavaScript
import axios from 'axios';
提示： 也可以在项目中创建单独的HTTP模块来封装Axios，统一管理API请求。
3基本使用
GET请求示例：
JavaScript
axios.get('https://api.example.com/data')
.then(response => {
// 处理成功响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error('请求出错:', error);
});
POST请求示例：
JavaScript
axios.post('https://api.example.com/users', {
name: '张三',
email: 'zhangsan@example.com'
})
.then(response => {
console.log('用户创建成功:', response.data);
})
.catch(error => {
console.error('创建用户失败:', error);
});
💡
核心概念：
.then()– 请求成功时执行的回调函数.catch()– 请求失败时执行的回调函数response.data– 服务器返回的数据- Axios 自动将响应数据解析为JSON对象
4Axios全局配置
可以设置全局默认值，避免在每个请求中重复配置：
JavaScript
// 设置基础URL axios.defaults.baseURL = 'https://api.example.com'; // 设置超时时间（毫秒） axios.defaults.timeout = 5000; // 设置默认请求头 axios.defaults.headers.common['Authorization'] = 'Bearer token123'; // 设置POST默认Content-Type axios.defaults.headers.post['Content-Type'] = 'application/json';
创建Axios实例
当需要与多个API交互时，可以创建多个实例：
JavaScript
// 创建主API实例
const apiClient = axios.create({
baseURL: 'https://api.example.com/v1',
timeout: 8000
});
// 创建第二个API实例（如用于不同服务）
const authApi = axios.create({
baseURL: 'https://auth.example.com',
timeout: 5000
});
最佳实践： 推荐在单独的模块中创建Axios实例，然后在各个组件中导入使用。
5拦截器
拦截器允许你在请求发送前或响应接收后进行拦截处理
请求拦截器
常用于添加认证token、设置请求头等：
JavaScript
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('auth_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
响应拦截器
常用于统一处理错误、转换响应数据等：
JavaScript
axios.interceptors.response.use(
response => {
// 对响应数据做点什么
return response;
},
error => {
// 对响应错误做点什么
if (error.response.status === 401) {
// 处理未授权错误
alert('登录已过期，请重新登录');
router.push('/login');
}
return Promise.reject(error);
}
);
注意： 拦截器是一个全局设置，会影响所有请求，请谨慎使用！
6在Vue3中使用Axios
在Vue3中，通常使用组合式API（Composition API）结合Axios：
JavaScript
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const users = ref([]);
const loading = ref(true);
const error = ref(null);
// 获取用户数据
const fetchUsers = async () => {
try {
loading.value = true;
const response = await axios.get('/api/users');
users.value = response.data;
} catch (err) {
error.value = '获取用户数据失败: ' + err.message;
} finally {
loading.value = false;
}
};
// 组件挂载时获取数据
onMounted(() => {
fetchUsers();
});
</script>
💡
Vue3中使用的最佳实践：
- 使用
ref或reactive管理数据状态 - 使用
async/await使异步代码更易读 - 在
onMounted生命周期钩子中发送初始请求 - 添加加载状态和错误处理提升用户体验
7错误处理
Axios错误处理非常重要，它可以捕获网络错误、服务器错误等：
JavaScript
axios.get('/api/data')
.then(response => {
// 处理成功响应
})
.catch(error => {
if (error.response) {
// 请求已发出，服务器响应状态码超出2xx范围
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已发出，但没有收到响应
console.log('没有收到响应:', error.request);
} else {
// 在设置请求时发生错误
console.log('请求设置错误:', error.message);
}
console.log('完整错误配置:', error.config);
});
| 错误类型 | 说明 | 处理方法 |
|---|---|---|
| 网络错误 | 无法连接到服务器 | 检查网络连接，显示友好提示 |
| 404错误 | 请求资源不存在 | 检查API路径，提示用户 |
| 401/403错误 | 未授权/权限不足 | 重新登录或提示权限不足 |
| 500错误 | 服务器内部错误 | 提示用户稍后重试 |
| 超时错误 | 请求超时 | 增加超时时间或提示网络不佳 |
8取消请求
在某些情况下（如用户离开页面），可能需要取消正在进行的请求：
JavaScript
// 创建一个取消令牌源
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 发送请求时带上取消令牌
axios.get('/api/data', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('请求已取消', thrown.message);
} else {
// 处理其他错误
}
});
// 取消请求（参数可选，会传递给catch回调）
source.cancel('用户取消了操作');
// 在Vue3组件中使用
import { onUnmounted } from 'vue';
onUnmounted(() => {
// 组件卸载时取消所有请求
source.cancel('组件已卸载');
});
使用场景：
- 用户离开当前页面时
- 用户发起新请求时取消旧的相同请求
- 表单提交时防止重复提交
9总结
✅
Axios在Vue3中的最佳实践：
- 创建单独的axios实例进行API管理
- 使用拦截器统一处理认证和错误
- 在组合式API中使用async/await处理异步
- 添加加载状态和错误反馈提升用户体验
- 适当使用请求取消避免内存泄漏
- 对敏感操作使用POST而不是GET
学习建议： 作为编程小白，建议从简单的GET请求开始练习，逐步添加错误处理、加载状态，最后再学习拦截器、取消请求等高级功能。
注意： 在实际项目中，应该将API请求封装在单独的service模块中，而不是直接在组件中调用axios，这样更利于维护和复用。