文章目录
- 1. Axios简介
- 1.1 核心特性
- - **Promise based** - 支持Promise API,便于处理异步操作
- - **跨平台** - 同时支持浏览器和Node.js环境
- - **拦截请求和响应** - 通过拦截器机制轻松实现请求/响应转换
- 1. **自动转换JSON数据** - 自动将请求数据转换为JSON格式
- 2. **取消请求** - 支持取消已发出但尚未完成的请求
- 3. **防御XSRF** - 自带防御跨站请求伪造攻击机制
- 2. 基础使用
- 2.1 安装
- 2.2 发送GET请求
- 2.3 发送POST请求
- 3. 请求配置
- 4. 响应结构
- 5. 拦截器
- 5.1 请求拦截器
- 5.2 响应拦截器
- 6. 错误处理
- 7. 高级使用技巧
- 7.1 创建实例
- 7.2 请求取消
- 7.3 并发请求
- 8. 最佳实践
- 8.1 API模块化
- 8.2 响应数据统一处理
- 9. 性能优化技巧
- 9.1 数据缓存
- 9.2 防抖和节流
- 10. 与其他HTTP客户端对比
- 总结
1. Axios简介
Axios是一个基于Promise的HTTP客户端,可以在浏览器和Node.js环境中使用。它提供了一套简单且一致的API,使得发送HTTP请求变得异常便捷。自发布以来,Axios已成为前端开发中处理网络请求的首选工具之一。
1.1 核心特性
- Promise based - 支持Promise API,便于处理异步操作
- 跨平台 - 同时支持浏览器和Node.js环境
- 拦截请求和响应 - 通过拦截器机制轻松实现请求/响应转换
1. 自动转换JSON数据 - 自动将请求数据转换为JSON格式
2. 取消请求 - 支持取消已发出但尚未完成的请求
3. 防御XSRF - 自带防御跨站请求伪造攻击机制
2. 基础使用
2.1 安装
# 使用npm
npm install axios# 使用yarn
yarn add axios# 使用CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2.2 发送GET请求
// 基本GET请求
axios.get('https://api.example.com/data').then(response => {console.log(response.data);}).catch(error => {console.error('请求出错', error);});// 带参数的GET请求
axios.get('https://api.example.com/data', {params: {id: 123,category: 'frontend'}
}).then(response => {console.log(response.data);});
2.3 发送POST请求
// 基本POST请求
axios.post('https://api.example.com/users', {username: 'admin',password: '12345'
}).then(response => {console.log(response.data);});// 使用FormData
const formData = new FormData();
formData.append('file', fileInput.files[0]);axios.post('https://api.example.com/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}
});
3. 请求配置
Axios提供了丰富的配置选项,可以精确控制请求行为:
const config = {// 请求URLurl: 'https://api.example.com/data',// 请求方法method: 'post', // 默认是get// 基础URL,将与url拼接baseURL: 'https://api.example.com/',// 自定义请求头headers: {'Authorization': 'Bearer token123','Content-Type': 'application/json'},// URL参数params: {id: 1,page: 2},// 请求体数据data: {username: 'admin'},// 请求超时时间(毫秒)timeout: 5000,// 是否携带凭证信息(cookies)withCredentials: false
};axios(config);
4. 响应结构
Axios响应对象包含以下信息:
axios.get('/api/data').then(response => {console.log(response.data); // 服务器返回的数据console.log(response.status); // HTTP状态码console.log(response.statusText); // HTTP状态信息console.log(response.headers); // 响应头信息console.log(response.config); // 请求配置信息});
5. 拦截器
拦截器是Axios的强大特性,可以在请求发送前和响应接收后进行预处理。
5.1 请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {// 在发送请求前做些什么// 例如:添加认证令牌const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);
5.2 响应拦截器
// 添加响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做点什么// 例如:统一数据格式处理if (response.data.code === 0) {return response.data.data;}return response;},error => {// 对响应错误做点什么if (error.response && error.response.status === 401) {// 处理未授权的情况window.location.href = '/login';}return Promise.reject(error);}
);
6. 错误处理
Axios提供了多种错误处理机制:
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);switch (error.response.status) {case 400: console.log('请求参数错误'); break;case 401: console.log('未授权访问'); break;case 404: console.log('请求资源不存在'); break;case 500: console.log('服务器内部错误'); break;default: console.log(`其他错误: ${error.response.status}`);}} else if (error.request) {// 请求已发出,但没有收到响应console.log('网络异常,服务器未响应');} else {// 请求配置有误console.log('请求配置错误:', error.message);}console.log(error.config); // 请求配置});
7. 高级使用技巧
7.1 创建实例
创建具有自定义配置的Axios实例:
// 创建API实例
const apiClient = axios.create({baseURL: 'https://api.example.com/v1',timeout: 10000,headers: {'Content-Type': 'application/json','Accept': 'application/json'}
});// 使用实例发送请求
apiClient.get('/users').then(response => {console.log(response.data);
});
7.2 请求取消
使用CancelToken取消请求:
const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/api/user/123', {cancelToken: source.token
}).catch(error => {if (axios.isCancel(error)) {console.log('请求已取消:', error.message);} else {// 处理错误}
});// 取消请求
source.cancel('用户取消了操作');
7.3 并发请求
同时发送多个请求并等待所有请求完成:
function getUserAccount() {return axios.get('/user/account');
}function getUserPermissions() {return axios.get('/user/permissions');
}// 使用Promise.all处理并发请求
Promise.all([getUserAccount(), getUserPermissions()]).then(([account, permissions]) => {console.log('账户:', account.data);console.log('权限:', permissions.data);}).catch(error => {console.error('请求出错:', error);});// 使用axios.all和axios.spread
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread((account, permissions) => {console.log('账户:', account.data);console.log('权限:', permissions.data);}));
8. 最佳实践
8.1 API模块化
// api/index.js
import axios from 'axios';const apiClient = axios.create({baseURL: process.env.API_BASE_URL || 'https://api.example.com',timeout: 5000
});// 添加通用拦截器
apiClient.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});export default apiClient;// api/user.js
import apiClient from './index';export const userApi = {getProfile: () => apiClient.get('/user/profile'),updateProfile: (data) => apiClient.put('/user/profile', data),login: (credentials) => apiClient.post('/auth/login', credentials)
};// 使用方式
import { userApi } from './api/user';async function loadUserProfile() {try {const profile = await userApi.getProfile();// 处理用户信息} catch (error) {// 处理错误}
}
8.2 响应数据统一处理
// 定义统一响应结构
axios.interceptors.response.use(response => {// 假设API返回格式: { code: 0, message: 'success', data: {...} }const res = response.data;if (res.code !== 0) {// 处理业务错误Message.error(res.message || '操作失败');// 特定错误码处理if (res.code === 401) {// 清除登录状态并跳转store.dispatch('user/logout');router.push('/login');}return Promise.reject(new Error(res.message || '未知错误'));}return res.data;},error => {// 网络错误等处理Message.error('网络异常,请稍后重试');return Promise.reject(error);}
);
9. 性能优化技巧
9.1 数据缓存
// 简单的请求缓存实现
const cache = new Map();function getCachedData(url, params = {}) {const key = `${url}_${JSON.stringify(params)}`;if (cache.has(key)) {const cachedData = cache.get(key);// 检查缓存是否过期if (Date.now() - cachedData.timestamp < 60000) { // 1分钟缓存return Promise.resolve(cachedData.data);}}return axios.get(url, { params }).then(response => {cache.set(key, {data: response.data,timestamp: Date.now()});return response.data;});
}
9.2 防抖和节流
// axios防抖示例
import axios from 'axios';
import { debounce } from 'lodash';// 防抖搜索请求
const searchAPI = debounce((keyword, callback) => {axios.get('/api/search', { params: { q: keyword } }).then(response => callback(response.data)).catch(error => console.error('搜索失败', error));
}, 500); // 500ms内只发送一次请求// 使用
searchInput.addEventListener('input', function() {searchAPI(this.value, results => {// 更新搜索结果updateSearchResults(results);});
});
10. 与其他HTTP客户端对比
特性 | Axios | Fetch | jQuery Ajax |
---|---|---|---|
浏览器支持 | 现代浏览器 + polyfill | 现代浏览器 + polyfill | 全部 |
Promise API | ✅ | ✅ | 有限支持 |
请求取消 | ✅ | 需AbortController | ❌ |
拦截器 | ✅ | ❌ | ❌ |
自动JSON转换 | ✅ | 需手动转换 | ✅ |
超时设置 | ✅ | ❌ | ✅ |
下载进度 | ✅ | ❌ | ✅ |
CSRF保护 | ✅ | ❌ | ✅ |
总结
Axios作为一个功能丰富、使用简便的HTTP客户端库,凭借其优秀的API设计和强大的功能扩展性,成为现代前端开发中处理网络请求的首选工具。通过合理利用配置选项、拦截器、错误处理等机制,可以构建出高效、健壮的前端应用。在前端技术栈快速迭代的今天,掌握Axios的各种高级特性和最佳实践,对提升开发效率和应用质量具有重要意义。