深入理解JavaScript async/await：链式处理异步分页数据

async 函数与 Promise 的内在联系

在JavaScript中，任何被声明为 async 的函数都会自动返回一个 Promise。这个 Promise 会在 async 函数执行完毕（即其中所有的 await 操作都已完成，并且函数返回了一个值）时解析（resolve），或者在函数执行过程中抛出错误时拒绝（reject）。这一核心特性是实现复杂异步流程链式调用的基石。

当你在 async 函数内部使用 await 关键字时，它会暂停当前 async 函数的执行，直到其后的 Promise 解析。一旦 Promise 解析，await 表达式就会返回解析的值，然后 async 函数从暂停的地方继续执行。这使得处理一系列顺序的异步操作变得如同同步代码一样直观。

优雅地处理分页数据：一个实际案例

考虑一个常见场景：我们需要从一个初始URI下载数据，如果数据包含下一页的URI，则继续下载下一页，直到所有页面都被处理完毕。然后，只有在第一个URI的所有页面都处理完成后，才开始处理第二个完全独立的URI及其所有页面。

以下是实现这一目标的 async 函数结构：

立即学习“Java免费学习笔记（深入）”；

// 模拟一个异步 HTTP 客户端，用于获取JSON数据
function delay(msec) {
  return new Promise((resolve) => {
    setTimeout(resolve, msec);
  });
}

let simulatedPageCount = 0; // 用于模拟每个URI下的总页数

async function getObjectFromJsonFromUri(uri) {
  console.log(`正在请求: ${uri}`);
  await delay(500); // 模拟网络延迟
  // 模拟数据返回，如果还有页面，则返回下一页的URI
  const hasNextPage = simulatedPageCount-- > 0;
  return {
    data: `数据来自 ${uri}`,
    nextPageUri: hasNextPage ? `${uri}/page${simulatedPageCount + 1}` : null,
  };
}

/**
 * 处理单个初始URI及其所有分页数据的异步函数
 * @param {string} initialPageUri - 初始页面的URI
 */
async function processAllPagesForUri(initialPageUri) {
  // 每次调用此函数时，重置模拟页数
  simulatedPageCount = 2; // 假设每个初始URI都有2个后续页面

  let currentPageUri = initialPageUri;
  console.log(`--- 开始处理 URI: ${initialPageUri} ---`);
  while (currentPageUri) {
    const pageData = await getObjectFromJsonFromUri(currentPageUri);
    // 在这里对 pageData 进行业务逻辑处理
    console.log(`已处理: ${pageData.data}`);
    currentPageUri = pageData.nextPageUri; // 获取下一页的URI
  }
  console.log(`--- URI: ${initialPageUri} 所有页面处理完毕 ---`);
}

在 processAllPagesForUri 函数内部，while (currentPageUri) 循环结合 await getObjectFromJsonFromUri(currentPageUri) 确保了单个URI下的所有页面都按顺序被请求和处理。await 关键字保证了在获取到当前页数据并处理完成之前，不会进入下一次循环。

链式调用 async 函数

现在，我们有了能够处理一个完整URI及其所有分页数据的 async 函数 processAllPagesForUri。要实现多个独立URI的顺序处理，只需利用 async 函数返回 Promise 的特性，通过 .then() 进行链式调用：

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

59

查看详情

console.log('--- 启动任务 ---');

// 第一个URI处理完成后，才开始处理第二个URI
processAllPagesForUri('http://example.com/api/uri1')
  .then(() => {
    console.log('\n所有 uri1 相关的页面都已处理完毕，现在开始处理 uri2。');
    return processAllPagesForUri('http://example.com/api/uri2'); // 返回一个新的Promise
  })
  .then(() => {
    console.log('\n所有 uri2 相关的页面也已处理完毕。');
    console.log('--- 所有任务完成 ---');
  })
  .catch(error => {
    console.error('任务执行过程中发生错误:', error);
  });

执行流程分析：

1. processAllPagesForUri('http://example.com/api/uri1') 被调用，它立即返回一个 Promise。
2. JavaScript 引擎开始执行 processAllPagesForUri 函数内部的异步操作（例如，请求 uri1 的第一页）。
3. 当 processAllPagesForUri('http://example.com/api/uri1') 内部的所有 await 操作都完成，并且函数执行完毕时，它返回的 Promise 会被解析。
4. 此时，.then() 回调函数才会被执行。在这个回调中，我们调用 processAllPagesForUri('http://example.com/api/uri2')。
5. processAllPagesForUri('http://example.com/api/uri2') 同样返回一个 Promise，这个 Promise 又被 .then() 链的下一个 .then() 捕获。
6. 当 processAllPagesForUri('http://example.com/api/uri2') 完成后，最后一个 .then() 回调被执行，表示所有任务完成。

这种方式完美地实现了“一个任务完全完成后再开始下一个任务”的需求，且代码结构清晰，避免了传统回调函数嵌套带来的“回调地狱”问题。

注意事项与最佳实践

• 错误处理: 在 async 函数内部，可以使用 try...catch 块来捕获 await 操作可能抛出的错误。对于链式调用的 Promise，可以在链的末尾添加 .catch() 来统一处理任何环节中发生的拒绝（reject）。

  async function safeProcess() {
    try {
      await processAllPagesForUri('bad-uri-that-will-fail');
    } catch (error) {
      console.error("处理特定URI时出错:", error.message);
    }
  }
  
  processAllPagesForUri('uri1')
    .then(() => processAllPagesForUri('uri2'))
    .catch(err => console.error("链式调用中发生未捕获错误:", err));

  登录后复制

• 并发控制: 上述示例是严格顺序执行的。如果某些任务可以并行执行以提高效率，可以使用 Promise.all() 或 Promise.allSettled() 结合 await。但对于本教程中描述的“前一个完全完成才能开始下一个”的场景，链式 .then() 是最合适的。

• 返回值的传递: 如果 async 函数返回一个值，这个值将作为其返回 Promise 的解析值，可以在下一个 .then() 回调中接收并使用。

  async function getValue() {
      await delay(100);
      return "some data";
  }
  
  getValue().then(data => console.log(data)); // 输出 "some data"

  登录后复制

总结

JavaScript 的 async/await 语法是处理异步操作的强大工具，它使得异步代码的编写和理解变得更加容易。理解 async 函数返回 Promise 的本质，并善用 .then() 方法进行链式调用，能够帮助开发者构建出结构清晰、逻辑严谨且易于维护的异步流程，尤其在处理如分页数据下载这类需要严格顺序执行的复杂场景时，其优势尤为明显。通过这种方式，我们能够避免传统回调函数的复杂性，享受到同步代码般的流畅体验。

以上就是深入理解JavaScript async/await：链式处理异步分页数据的详细内容，更多请关注php中文网其它相关文章！