Axios之核心语法详解

Axios是目前最流行的HTTP客户端库之一，基于Promise封装了XMLHttpRequest，同时支持浏览器和Node.js环境。它不仅简化了Ajax请求的写法，还提供了拦截器、请求取消、自动转换JSON等强大功能。

一、Axios的优势与基本概念

1.1 为什么选择Axios？

相比原生XMLHttpRequest和fetch，Axios的核心优势在于：

• 基于Promise：支持链式调用和async/await，避免回调地狱；
• 自动转换数据：请求自动序列化JSON，响应自动解析JSON；
• 拦截器机制：可在请求发送前和响应返回后统一处理（如添加token、处理错误）；
• 请求取消：支持取消正在进行的请求（如切换页面时取消未完成的请求）；
• 错误处理：统一捕获网络错误和HTTP错误状态码；
• 浏览器兼容性：支持IE8+（需配合polyfill）和现代浏览器。

1.2 安装与引入

Axios的安装方式多样，适用于不同项目环境：

1.2.1 直接引入（HTML页面）

通过CDN或本地文件引入，暴露全局axios对象：

<!-- 引入CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 本地引入 -->
<script src="./axios.min.js"></script><script>// 全局使用axios.get('/api/data').then(response => {console.log(response.data);});
</script>

1.2.2 npm安装（模块化项目）

适用于Vue、React等工程化项目：

# 安装
npm install axios --save
# 或
yarn add axios

引入使用：

// ES6模块引入
import axios from 'axios';// CommonJS引入
const axios = require('axios');

二、Axios的基础请求方法

Axios提供了多种请求方法，对应HTTP的各种请求类型，最常用的是get（获取数据）和post（提交数据）。

2.1 基本语法：axios(config)

Axios的核心是axios()函数，接收一个配置对象，返回Promise：

axios({method: 'get', // 请求方法（get/post/put/delete等）url: '/api/user', // 请求URLparams: { id: 1 }, // GET请求参数（自动拼接到URL）// data: { name: '张三' }, // POST请求参数（放在请求体）timeout: 5000 // 超时时间（毫秒）
})
.then(response => {console.log('请求成功：', response.data);
})
.catch(error => {console.error('请求失败：', error);
});

2.2 快捷方法：简化常用请求

为简化代码，Axios提供了对应HTTP方法的快捷函数：

快捷方法	说明	语法示例
axios.get()	发送GET请求	axios.get(url, { params, ...config })
axios.post()	发送POST请求	axios.post(url, data, { ...config })
axios.put()	发送PUT请求（更新资源）	axios.put(url, data, config)
axios.delete()	发送DELETE请求（删除资源）	axios.delete(url, { params, config })

2.2.1 GET请求：获取数据

GET请求用于从服务器获取数据，参数通过params配置（自动拼接到URL的查询字符串）：

// 基础用法
axios.get('/api/user', {params: {id: 123,name: '张三' // 参数会拼接到URL：/api/user?id=123&name=张三},timeout: 3000 // 超时时间3秒
})
.then(response => {console.log('用户数据：', response.data); // 响应数据在response.data中
})
.catch(error => {console.error('获取失败：', error);
});// 使用async/await（更简洁）
async function getUser() {try {const response = await axios.get('/api/user', { params: { id: 123 } });console.log('用户数据：', response.data);} catch (error) {console.error('获取失败：', error);}
}
getUser();

2.2.2 POST请求：提交数据

POST请求用于向服务器提交数据（如表单、新增资源），数据通过第二个参数传递（放在请求体）：

// 提交JSON数据（默认Content-Type: application/json）
async function addUser() {try {const user = { name: '李四', age: 25 };// 第二个参数为请求体数据const response = await axios.post('/api/user', user, {timeout: 5000});console.log('新增用户成功：', response.data);} catch (error) {console.error('新增失败：', error);}
}// 提交表单数据（Content-Type: application/x-www-form-urlencoded）
async function submitForm() {try {const formData = new URLSearchParams();formData.append('username', 'admin');formData.append('password', '123456');const response = await axios.post('/api/login', formData, {headers: {'Content-Type': 'application/x-www-form-urlencoded' // 指定表单格式}});console.log('登录成功：', response.data);} catch (error) {console.error('登录失败：', error);}
}

三、Axios的配置选项

Axios的配置项非常灵活，可在全局、实例或请求级别设置，优先级为：请求配置 > 实例配置 > 全局默认配置。

3.1 常用配置项

配置项	说明	示例值
url	请求URL（必填）	/api/user
method	请求方法（默认get）	'post', 'put'
baseURL	基础URL，自动拼接在url前	'https://api.example.com'
params	GET请求参数（会拼接到URL）	{ id: 1, name: '张三' }
data	POST/PUT请求体数据	{ name: '张三' }
headers	请求头	{ 'Authorization': 'Bearer token' }
timeout	超时时间（毫秒，默认0表示无超时）	5000
responseType	响应数据类型（默认json）	'text', 'blob'（用于下载文件）
withCredentials	是否允许跨域请求携带cookie	true

3.2 配置方式

3.2.1 全局默认配置

设置全局默认配置，所有请求都会继承这些配置：

// 设置全局基础URL
axios.defaults.baseURL = 'https://api.example.com';
// 全局超时时间
axios.defaults.timeout = 5000;
// 全局请求头
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.headers.post['Content-Type'] = 'application/json';// 后续请求会自动使用全局配置
axios.get('/user') // 实际URL：https://api.example.com/user.then(response => { ... });

3.2.2 创建实例配置

当项目需要访问多个API域名时，可创建多个Axios实例，每个实例有独立配置：

// 创建实例1（访问API1）
const api1 = axios.create({baseURL: 'https://api1.example.com',timeout: 3000,headers: { 'X-From': 'api1' }
});// 创建实例2（访问API2）
const api2 = axios.create({baseURL: 'https://api2.example.com',timeout: 5000
});// 使用实例发送请求
api1.get('/user') // URL：https://api1.example.com/user.then(response => { ... });api2.post('/data', { key: 'value' }) // URL：https://api2.example.com/data.then(response => { ... });

四、响应对象与错误处理

4.1 响应对象结构

Axios的响应对象包含服务器返回的数据及请求相关信息，主要属性：

axios.get('/api/user').then(response => {response.data; // 服务器返回的响应数据（最重要）response.status; // HTTP状态码（如200）response.statusText; // HTTP状态文本（如"OK"）response.headers; // 响应头response.config; // 请求时的配置对象response.request; // 原生请求对象（浏览器中是XMLHttpRequest）
});

4.2 错误处理

Axios的错误分为两种类型，需在catch中区分处理：

4.2.1 网络错误（无响应）

如断网、跨域限制等，此时error.response为undefined：

axios.get('/api/user').catch(error => {if (!error.response) {// 网络错误console.error('网络错误：', error.message);}});

4.2.2 HTTP错误（有响应但状态码异常）

如404（资源不存在）、500（服务器错误）等，error.response包含响应信息：

axios.get('/api/user').catch(error => {if (error.response) {// HTTP错误console.error('状态码：', error.response.status); // 如404console.error('错误数据：', error.response.data); // 服务器返回的错误信息}});

4.2.3 完整错误处理示例

async function fetchData() {try {const response = await axios.get('/api/data');console.log('成功：', response.data);} catch (error) {if (!error.response) {// 网络错误alert('网络异常，请检查连接');} else if (error.response.status === 404) {// 404错误alert('请求的资源不存在');} else if (error.response.status === 500) {// 500错误alert('服务器内部错误，请稍后重试');} else {// 其他错误alert(`请求失败：${error.response.data.message}`);}console.error('错误详情：', error);}
}

五、拦截器：请求与响应的统一处理

拦截器（Interceptor）是Axios的核心特性，允许在请求发送前（请求拦截器）和响应返回后（响应拦截器）进行统一处理，适用于添加token、加载提示、错误统一处理等场景。

5.1 请求拦截器

在请求发送前执行，可用于添加请求头（如token）、显示加载动画等：

// 添加请求拦截器
axios.interceptors.request.use(// 成功回调：请求发送前执行config => {// 示例1：添加token到请求头const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}// 示例2：显示加载动画document.getElementById('loading').style.display = 'block';return config; // 必须返回配置对象，否则请求会失败},// 失败回调：请求出错时执行（如参数错误）error => {// 隐藏加载动画document.getElementById('loading').style.display = 'none';return Promise.reject(error);}
);

5.2 响应拦截器

在响应返回后执行，可用于隐藏加载动画、统一处理错误等：

// 添加响应拦截器
axios.interceptors.response.use(// 成功回调：响应状态码2xx时执行response => {// 隐藏加载动画document.getElementById('loading').style.display = 'none';return response; // 必须返回响应对象，否则后续.then无法获取数据},// 失败回调：响应状态码非2xx时执行error => {// 隐藏加载动画document.getElementById('loading').style.display = 'none';// 示例：token过期时跳转到登录页if (error.response && error.response.status === 401) {localStorage.removeItem('token');window.location.href = '/login'; // 跳转登录页}return Promise.reject(error); // 传递错误到后续catch}
);

5.3 移除拦截器

若需临时禁用拦截器，可通过拦截器返回的ID移除：

// 添加拦截器并保存ID
const requestInterceptor = axios.interceptors.request.use(config => config);// 移除拦截器
axios.interceptors.request.eject(requestInterceptor);

六、高级特性：请求取消与并发请求

6.1 请求取消

在某些场景（如用户快速切换标签、搜索框输入防抖），需要取消未完成的请求，避免资源浪费或数据错乱。

6.1.1 使用AbortController（推荐，ES6+）

// 创建控制器
const controller = new AbortController();
// 获取信号量
const signal = controller.signal;// 发送请求时关联信号量
axios.get('/api/slow-data', { signal }).then(response => {console.log('请求成功：', response.data);}).catch(error => {if (error.name === 'CanceledError') {console.log('请求已取消');}});// 3秒后取消请求（如用户切换页面）
setTimeout(() => {controller.abort(); // 取消请求
}, 3000);

6.1.2 旧版方式（使用CancelToken，已废弃但仍可用）

// 创建取消令牌
const CancelToken = axios.CancelToken;
const source = CancelToken.source();// 发送请求
axios.get('/api/slow-data', {cancelToken: source.token
})
.catch(error => {if (axios.isCancel(error)) {console.log('请求已取消：', error.message);}
});// 取消请求（可传递取消原因）
source.cancel('用户主动取消');

6.2 并发请求处理

Axios提供了axios.all()和axios.spread()处理并发请求（同时发送多个请求，等待所有请求完成后处理）：

// 并发发送两个请求
axios.all([axios.get('/api/user/1'),axios.get('/api/posts')
])
.then(axios.spread((userResponse, postsResponse) => {// 两个请求都完成后执行console.log('用户数据：', userResponse.data);console.log('文章列表：', postsResponse.data);
}))
.catch(error => {console.error('至少一个请求失败：', error);
});// 使用async/await处理并发（更直观）
async function fetchConcurrentData() {try {// 同时发送请求const [userResponse, postsResponse] = await Promise.all([axios.get('/api/user/1'),axios.get('/api/posts')]);console.log('用户数据：', userResponse.data);console.log('文章列表：', postsResponse.data);} catch (error) {console.error('请求失败：', error);}
}

若这篇内容帮到你，动动手指支持下！关注不迷路，干货持续输出！
ヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉ