严格来说，axios并没有提供真正的同步请求方法，它底层依赖浏览器的XMLHttpRequest或Node.js的http模块，这些请求天然是异步执行的。但我们通常说的“axios同步请求”，指的是让多个请求按顺序执行，或者让代码写起来像同步代码一样直观。这需要借助ES2017引入的async和await语法来实现。本文会从原理讲到实战，把常见的写法和容易踩的坑都梳理清楚。
为什么axios不能真正同步执行
在JavaScript中，同步阻塞的请求会冻结整个页面的渲染和交互，用户体验极差，所以浏览器环境早就废弃了XMLHttpRequest的open方法中第三个参数传false的同步模式（仅在Worker中可用）。axios作为一个基于Promise封装的HTTP库，它的axios.get()、axios.post()等方法返回的都是Promise对象，Promise的回调天然会被放入微任务队列，不可能以同步方式执行。
理解这一点的关键是分清“执行顺序控制”和“同步执行”的区别。await并不能让请求本身变成同步的，它只是暂停当前async函数的执行，把后续代码安排到Promise完成之后再继续，事件循环依然在正常运转，页面不会卡死。所以更准确的说法是：我们用await实现的是“异步代码的同步化书写风格”。
下面是一个最基础的例子，请求会严格按顺序执行：
async function loadData() {
// 第一个请求完成后，才会发起第二个请求
const userRes = await axios.get('/api/user');
console.log('用户信息:', userRes.data);
// 依赖第一个请求的结果作为参数
const orderRes = await axios.get('/api/order', {
params: { userId: userRes.data.id }
});
console.log('订单信息:', orderRes.data);
}
loadData();这段代码中，第二个请求的参数依赖第一个请求的返回值，如果不使用await，第二个请求会在第一个请求还没返回时就发起，拿到的是undefined，这是新手最常遇到的问题之一。
async await 的基本语法与常见用法
async函数是Generator函数的语法糖，它总是返回一个Promise。await后面通常跟一个Promise对象，axios的请求方法恰好都返回Promise，所以两者配合非常自然。当await执行时，函数会在此处暂停，直到Promise状态变为fulfilled，把resolve的值作为await表达式的返回值。
注意axios返回的响应对象包含data、status、headers等字段，真正的数据在res.data里。如果觉得多一层取值麻烦，可以用解构写法：
async function getData() {
try {
// 解构出data字段并重命名
const { data: list } = await axios.get('/api/list');
console.log(list);
const { data: detail } = await axios.post('/api/detail', { id: list[0].id });
return detail;
} catch (err) {
console.error('请求出错:', err.message);
}
}这里必须强调try catch的重要性。await后面的Promise一旦reject，抛出的错误会沿着async函数向外传播，如果不捕获，会得到一个unhandled promise rejection，后续代码也不会执行。特别是在Vue或React的事件处理函数中使用时，忘记捕获错误会导致界面数据加载失败却没有提示。
另一个常见场景是在循环中请求。假如要依次获取10个用户的详情，应该用for...of配合await实现串行：
async function fetchUsers(ids) {
const results = [];
for (const id of ids) {
// 逐个等待，保证顺序
const res = await axios.get('/api/user/' + id);
results.push(res.data);
}
return results;
}如果使用forEach来写，会发现await完全不生效，所有请求同时发出去了。这是因为forEach的回调函数不是async函数，它不会等待你的await，这是很多人踩过的坑。需要串行就用for...of，需要并发就用Promise.all。
串行、并发与错误处理的注意事项
并不是所有场景都应该用await串行执行。如果多个请求之间没有依赖关系，逐个await会让总耗时变成所有请求耗时之和，而并发执行只需要等最慢的那个。此时应该用Promise.all：
async function loadDashboard() {
// 三个请求同时发出，全部完成后一起返回
const [user, stats, notices] = await Promise.all([
axios.get('/api/user'),
axios.get('/api/stats'),
axios.get('/api/notices')
]);
console.log(user.data, stats.data, notices.data);
}两者的性能差异很大。假设每个请求耗时500毫秒，三个请求串行需要1.5秒，而用Promise.all并发只需要500毫秒左右。判断标准很简单：后一个请求是否依赖前一个请求的结果，依赖就串行，不依赖就并发。
错误处理上还有几个细节值得注意。第一，Promise.all只要有一个请求失败就会整体reject，如果希望部分失败不影响其他结果，可以改用Promise.allSettled。第二，await必须写在async函数内部，这是语法层面的硬性要求，如果在普通函数或者全局作用域直接写await会直接报语法错误（ES2022的顶层await仅限于ES模块环境）。第三，async函数本身返回Promise，调用它的地方如果也需要等待结果，同样要用await接收或者用then链处理。
最后提一下拦截器的配合使用。可以在axios的响应拦截器中统一处理错误码和token失效逻辑，减少每个请求处重复的try catch代码：
axios.interceptors.response.use(
res => {
if (res.data.code !== 0) {
return Promise.reject(new Error(res.data.msg));
}
return res.data;
},
err => {
if (err.response && err.response.status === 401) {
// 跳转登录页等统一处理
}
return Promise.reject(err);
}
);总结一下：axios实现“同步”的唯一正解就是async函数加await，核心是控制请求的执行顺序而不是改变请求本身的异步本质。记住await必须在async内使用、错误要用try catch捕获、循环串行用for...of、无依赖请求用Promise.all并发，掌握这几点，日常开发中绝大多数请求编排问题都能轻松应对。
axios同步请求async awaitPromise修改时间：2026-09-11 05:22:26