在JavaScript异步编程场景中，多重AJAX请求的处理一直是开发者需要面对的常见问题，Async/Await作为基于Promise的语法糖，能让异步代码的书写更接近同步逻辑，大幅降低代码复杂度。
Async/Await的基本使用前提
Async/Await需要配合Promise使用，首先我们需要将传统的AJAX请求封装成返回Promise的函数，这样后续才能用await等待其完成。下面是一个基于XMLHttpRequest封装的AJAX请求示例：
// 封装返回Promise的AJAX请求函数
function ajaxRequest(url, method = 'GET', data = null) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(new Error('请求失败，状态码：' + xhr.status));
}
};
xhr.onerror = function() {
reject(new Error('网络错误'));
};
xhr.send(data ? JSON.stringify(data) : null);
});
}
并行处理多重AJAX请求返回值
如果多个AJAX请求之间没有依赖关系，需要同时发送并等待所有返回值返回，可以使用Promise.all配合Async/Await实现，这样能最大化请求效率。
async function handleParallelRequests() {
try {
// 同时发起三个无依赖的AJAX请求
const [result1, result2, result3] = await Promise.all([
ajaxRequest('https://ipipp.com/api/user/1'),
ajaxRequest('https://ipipp.com/api/order/1'),
ajaxRequest('https://ipipp.com/api/goods/1')
]);
// 所有请求完成后统一处理返回值
console.log('用户数据：', result1);
console.log('订单数据：', result2);
console.log('商品数据：', result3);
// 后续业务逻辑
return { result1, result2, result3 };
} catch (error) {
console.error('并行请求出错：', error.message);
}
}
这种方式下，三个请求会同时发出，只有当所有请求都成功返回时，await才会继续执行后续代码，任意一个请求失败都会直接进入catch捕获错误。
串行处理多重AJAX请求返回值
如果后续AJAX请求需要依赖前一个请求的返回值作为参数，就需要串行处理，按照顺序依次等待每个请求完成后再发起下一个。
async function handleSerialRequests() {
try {
// 第一个请求获取用户ID
const userRes = await ajaxRequest('https://ipipp.com/api/user/1');
const userId = userRes.id;
// 第二个请求依赖第一个请求的用户ID
const orderRes = await ajaxRequest(`https://ipipp.com/api/order?userId=${userId}`);
const orderId = orderRes.id;
// 第三个请求依赖第二个请求的订单ID
const goodsRes = await ajaxRequest(`https://ipipp.com/api/goods?orderId=${orderId}`);
console.log('最终获取的商品数据：', goodsRes);
return goodsRes;
} catch (error) {
console.error('串行请求出错：', error.message);
}
}
串行处理的逻辑和同步代码几乎一致，每个await都会等待前一个请求完成，代码可读性远高于嵌套的Promise.then调用。
处理部分请求失败的场景
如果希望多个并行请求中，即使部分请求失败也不影响其他请求的结果处理，可以给每个请求单独添加错误捕获，避免Promise.all的失败即终止特性。
async function handlePartialFailRequests() {
// 给单个请求添加错误兜底
const request1 = ajaxRequest('https://ipipp.com/api/user/1').catch(err => {
console.error('请求1失败：', err.message);
return null;
});
const request2 = ajaxRequest('https://ipipp.com/api/order/1').catch(err => {
console.error('请求2失败：', err.message);
return null;
});
const request3 = ajaxRequest('https://ipipp.com/api/goods/1').catch(err => {
console.error('请求3失败：', err.message);
return null;
});
// 等待所有请求完成，不管成功失败
const [res1, res2, res3] = await Promise.all([request1, request2, request3]);
console.log('请求1结果：', res1);
console.log('请求2结果：', res2);
console.log('请求3结果：', res3);
// 过滤掉失败的结果后处理
const validResults = [res1, res2, res3].filter(item => item !== null);
console.log('有效结果列表：', validResults);
}
注意事项
- Async函数本身返回的是一个Promise对象，如果需要在外部获取Async函数的返回值，同样需要用then或者await处理。
- 不要在循环中使用await发起多个无依赖的请求，这样会变成串行执行，降低效率，应该先收集所有Promise再用Promise.all处理。
- 错误处理尽量用try...catch包裹，避免未捕获的Promise错误导致程序异常。
Async/AwaitJavaScriptAJAX多重请求处理修改时间：2026-07-06 13:24:25