Axios 是一个基于 Promise 的流行的 HTTP 客户端,用于浏览器和 Node.js 环境,支持 Promise API、拦截请求和响应、转换请求数据和响应数据等功能。
一、安装 Axios
-
使用 npm 或 yarn 安装(适用于 Vue/React 等项目):
npm install axios --save # 或 yarn add axios
-
使用 CDN 引入(适用于原生 HTML 项目):
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
二、基本使用方法
1. 发送 GET 请求
用于从服务器获取数据,可通过 URL 参数传递数据。
// 引入 Axios(模块化项目中)
import axios from 'axios';// 发送 GET 请求
axios.get('https://api.example.com/users').then(response => {console.log('请求成功:', response.data); // 服务器返回的数据}).catch(error => {console.log('请求失败:', error);});// 带参数的 GET 请求
axios.get('https://api.example.com/users', {params: {id: 123, // 会自动拼接到 URL:?id=123name: '张三'}}).then(response => {console.log(response.data);}).catch(error => {console.log(error);});
2. 发送 POST 请求
用于向服务器提交数据(如表单提交、创建资源),数据放在请求体中。
// 发送 POST 请求
axios.post('https://api.example.com/users', {name: '张三',age: 20,email: 'zhangsan@example.com'}).then(response => {console.log('创建成功:', response.data);}).catch(error => {console.log('创建失败:', error);});
3. 其他请求方法
Axios 支持所有 HTTP 方法:get
、post
、put
(更新资源)、delete
(删除资源)、patch
(部分更新)等,用法类似:
运行
// PUT 请求(全量更新)
axios.put('https://api.example.com/users/123', { name: '李四' }).then(response => console.log(response)).catch(error => console.log(error));// DELETE 请求
axios.delete('https://api.example.com/users/123').then(response => console.log(response)).catch(error => console.log(error));
三、Axios 配置
可以通过配置简化重复的请求参数(如基础 URL、请求头、超时时间等)。
1. 全局配置
设置所有请求的默认配置:
axios.defaults.baseURL = 'https://api.example.com'; // 基础 URL
axios.defaults.headers.common['Authorization'] = 'Bearer token123'; // 全局请求头
axios.defaults.headers.post['Content-Type'] = 'application/json'; // POST 请求头
axios.defaults.timeout = 5000; // 超时时间(毫秒)
2. 实例配置
创建 Axios 实例,单独配置(适用于多服务器请求场景):
// 创建实例
const instance = axios.create({baseURL: 'https://api.another-example.com',timeout: 8000,headers: { 'X-Custom-Header': 'foobar' }
});// 使用实例发送请求
instance.get('/data').then(response => console.log(response));
四、拦截器
拦截器用于在请求发送前或响应返回后统一处理(如添加 token、处理错误)。
1. 请求拦截器
在请求发送前执行(如添加认证 token):
// 添加请求拦截器
axios.interceptors.request.use(config => {// 请求发送前的处理(如添加 token)const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config; // 必须返回 config},error => {// 请求错误时的处理return Promise.reject(error);}
);
2. 响应拦截器
在响应返回后执行(如统一处理错误):
// 添加响应拦截器
axios.interceptors.response.use(response => {// 响应成功时的处理(只返回数据部分)return response.data;},error => {// 响应错误时的处理(如 token 过期)if (error.response && error.response.status === 401) {// 跳转到登录页window.location.href = '/login';}return Promise.reject(error);}
);
五、错误处理
详细处理请求中的各种错误(网络错误、服务器错误等):
axios.get('/data').then(data => console.log(data)).catch(error => {if (error.response) {// 服务器响应了但状态码不是 2xx(如 404、500)console.log('状态码:', error.response.status);console.log('响应数据:', error.response.data);} else if (error.request) {// 请求已发送但无响应(如网络错误)console.log('无响应:', error.request);} else {// 其他错误console.log('错误信息:', error.message);}});
六、并发请求
同时发送多个请求,等待所有请求完成后处理:
// 并发请求
axios.all([axios.get('/users'),axios.get('/posts')
])
.then(axios.spread((usersResponse, postsResponse) => {// 两个请求都完成后执行console.log('用户数据:', usersResponse.data);console.log('文章数据:', postsResponse.data);
}))
.catch(error => {console.log('请求失败:', error);
});
七、在 Vue/React 中使用
在框架中通常会封装 Axios 作为请求工具,例如在 Vue 中:
// src/utils/request.js
import axios from 'axios';const request = axios.create({baseURL: '/api', // 基础路径(配合代理解决跨域)timeout: 5000
});// 请求拦截器
request.interceptors.request.use(config => {// 添加 tokenconfig.headers.token = localStorage.getItem('token');return config;
});// 响应拦截器
request.interceptors.response.use(res => res.data,err => Promise.reject(err)
);export default request;
在组件中使用:
import request from '@/utils/request';request.get('/users').then(data => {console.log(data);
});