async函数中用await配合jQuery.when处理AJAX请求结果不符预期的解决办法

这个问题我之前也踩过坑！核心原因是你没利用Promise.all()来配合await处理多个并行异步请求——await本身只能处理单个Promise，直接放多个请求进数组的话，要么返回的是未resolved的Promise对象数组，要么没正确等待所有请求完成。

先看错误写法（为什么会出问题） #

比如你可能这样写：

async function getTwoResponses() {
  // 这里返回的是两个Promise对象的数组，而非请求结果
  return [fetch('/api/url1'), fetch('/api/url2')];
}

// 或者这样，虽然用了await但没批量处理
async function getTwoResponses() {
  const req1 = fetch('/api/url1');
  const req2 = fetch('/api/url2');
  // 这里只拿到了Promise，没等待它们resolve
  return [req1, req2];
}

调用这类函数后，你得到的是两个未完成的Promise，自然不是预期的响应文本数组。

正确解决方案：用await Promise.all() #

Promise.all()会接收一个Promise数组，返回一个新的Promise——当所有输入的Promise都成功resolve后，这个新Promise会返回一个包含所有结果的数组，顺序和你传入的Promise顺序完全一致。配合await就能完美用你偏好的语法处理多请求：

方案1：完全用await，不依赖then()

如果你不想用then()，可以把每个请求的处理逻辑封装成小的async函数：

async function getResponseText(url) {
  const response = await fetch(url);
  return await response.text(); // 等待响应文本解析完成
}

async function getTwoResponses() {
  // 先发起两个请求（并行），得到两个Promise
  const promise1 = getResponseText('/api/url1');
  const promise2 = getResponseText('/api/url2');
  
  // 等待两个请求都完成，拿到结果数组
  const [result1, result2] = await Promise.all([promise1, promise2]);
  
  return [result1, result2];
}

方案2：更简洁的写法

如果觉得封装函数麻烦，也可以直接在Promise.all()里写逻辑：

async function getTwoResponses() {
  return await Promise.all([
    (async () => {
      const res = await fetch('/api/url1');
      return await res.text();
    })(),
    (async () => {
      const res = await fetch('/api/url2');
      return await res.text();
    })()
  ]);
}

额外说明：串行请求的情况 #

如果你需要先等第一个请求完成再发起第二个（而非并行），那可以直接逐个await：

async function getTwoResponsesSerial() {
  const result1 = await getResponseText('/api/url1');
  const result2 = await getResponseText('/api/url2');
  return [result1, result2];
}

这种写法不需要Promise.all()，但缺点是两个请求会依次执行，总耗时是两个请求的时间之和，并行写法则是耗时最长的那个请求的时间，效率更高。

内容的提问来源于stack exchange，提问作者user3599803