【Axios使用手册】如何使用axios向后端发送请求并进行数据交互

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它支持请求和响应拦截、取消请求、自动转换 JSON 数据等功能，非常适合在现代 JavaScript 应用中进行网络请求。以下是对 axios 的详细讲解，包括安装、基本用法、高级功能等。

1. 安装

你可以通过 npm 或 yarn 来安装 axios：

深色版本

npm install axios

或者

深色版本

yarn add axios

2. 基本用法

发送 GET 请求

import axios from 'axios';axios.get('/api/data').then(response => {console.log(response.data); // 打印响应数据}).catch(error => {console.error('请求失败:', error);});

发送 POST 请求

import axios from 'axios';const data = {username: 'example',password: 'password123'
};axios.post('/api/login', data).then(response => {console.log(response.data); // 打印响应数据}).catch(error => {console.error('请求失败:', error);});

发送 PUT 请求

import axios from 'axios';const updatedData = {id: 1,name: 'Updated Name'
};axios.put('/api/resource/1', updatedData).then(response => {console.log(response.data); // 打印响应数据}).catch(error => {console.error('请求失败:', error);});

发送 DELETE 请求

import axios from 'axios';axios.delete('/api/resource/1').then(response => {console.log('删除成功');}).catch(error => {console.error('删除失败:', error);});

3. 配置默认设置

你可以为 axios 设置默认的配置项，例如基础 URL、请求头等。这在多个请求中使用相同的配置时非常有用。

import axios from 'axios';// 设置默认的基础 URL 和请求头
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer your-token-here';
axios.defaults.headers.post['Content-Type'] = 'application/json';// 现在所有的请求都会使用这些默认设置
axios.get('/data').then(response => {console.log(response.data);}).catch(error => {console.error('请求失败:', error);});

4. 请求和响应拦截器

axios 提供了请求和响应拦截器，可以在请求发送前或响应接收后对数据进行处理。

请求拦截器

import axios from 'axios';axios.interceptors.request.use(config => {// 在发送请求之前做些什么console.log('请求拦截器:', config);return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);

响应拦截器

import axios from 'axios';axios.interceptors.response.use(response => {// 对响应数据做些什么console.log('响应拦截器:', response);return response;},error => {// 对响应错误做些什么if (error.response) {// 请求已发出，但服务器响应的状态码不在 2xx 范围内console.error('服务器响应错误:', error.response.status);} else {// 某种请求错误（如网络问题）console.error('请求错误:', error.message);}return Promise.reject(error);}
);

5. 取消请求

axios 支持取消请求，这对于长时间运行的请求或用户操作（如页面切换）非常重要。

创建取消令牌

import axios from 'axios';
import CancelToken from 'axios/lib/cancel/CancelToken';const source = CancelToken.source();axios.get('/api/data', {cancelToken: source.token
}).then(response => {console.log(response.data);}).catch(thrown => {if (axios.isCancel(thrown)) {console.log('请求已取消:', thrown.message);} else {// 处理其他类型的错误console.error('请求失败:', thrown);}});// 取消请求
source.cancel('操作被用户取消');

6. 并发请求

axios 提供了 axios.all 和 axios.spread 方法来并发执行多个请求，并在所有请求完成后处理结果。

import axios from 'axios';function getUserAccount() {return axios.get('/api/account');
}function getUserPermissions() {return axios.get('/api/permissions');
}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread((account, permissions) => {console.log(account.data, permissions.data);})).catch(error => {console.error('请求失败:', error);});

7. 文件上传

axios 支持文件上传，通常使用 FormData 对象来封装文件和其他表单数据。

import axios from 'axios';const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', '文件描述');axios.post('/api/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}
}).then(response => {console.log('文件上传成功:', response.data);}).catch(error => {console.error('文件上传失败:', error);});

8. 使用 Axios 实例

你还可以创建自定义的 axios 实例，以便为不同的 API 设置不同的配置。

import axios from 'axios';const apiClient = axios.create({baseURL: 'https://api.example.com',timeout: 1000,headers: { 'X-Custom-Header': 'foobar' }
});apiClient.get('/data').then(response => {console.log(response.data);}).catch(error => {console.error('请求失败:', error);});

9. 错误处理

axios 的错误对象包含丰富的信息，可以帮助你更好地处理错误。

import axios from 'axios';axios.get('/api/data').then(response => {console.log(response.data);}).catch(error => {if (error.response) {// 服务器响应了一个错误状态码console.error('服务器响应错误:', error.response.status, error.response.data);} else if (error.request) {// 请求已发出，但没有收到响应console.error('请求未收到响应:', error.request);} else {// 其他类型的错误console.error('请求错误:', error.message);}});

10. 使用 TypeScript

如果你使用 TypeScript，axios 提供了类型定义，使得代码更加安全和易于维护。

import axios, { AxiosResponse } from 'axios';interface User {id: number;name: string;
}axios.get<User[]>('/api/users').then((response: AxiosResponse<User[]>) => {console.log(response.data);}).catch(error => {console.error('请求失败:', error);});

总结

axios 是一个强大且灵活的 HTTP 客户端，适用于各种网络请求场景。它支持多种请求方法、配置选项、拦截器、并发请求、文件上传等功能，同时还提供了良好的错误处理机制和 TypeScript 支持。通过合理使用 axios，你可以简化前端与后端之间的通信，提升开发效率和代码质量。