JavaScript - 异步迭代

异步迭代

在 JavaScript 中，异步迭代是指对异步序列或集合(例如异步函数或生成器返回的序列或集合)进行迭代的能力。异步迭代通常用于涉及异步任务的操作，例如从远程服务器获取数据或从文件读取数据。

理解异步操作

简单来说，编程中的异步操作是指在待完成期间不会阻碍程序执行的任务或过程。这些异步任务不会暂停每个操作，等待其完成再执行下一个操作;它使程序能够:继续执行其他任务，同时等待当前任务完成。

使用 for await...of 循环

for await...of 循环用于异步迭代。它的工作原理与常规的 for...of 循环类似，但它旨在与异步迭代器配合使用。异步迭代器是一个定义异步 next() 方法的对象，该方法返回序列中下一个值的 Promise。

示例:使用 Promise

JavaScript 使用 Promise 作为管理异步操作的特性;这些 Promise 象征着异步任务的潜在结果，即完成或失败。值得注意的是，函数 asyncOperation 通过返回 Promise 来模拟此类任务。"for await...of"循环优雅地导航异步序列，强调在管理非阻塞操作时使用 Promise，同时又不影响代码的清晰度。

<!DOCTYPE html>
<html>
<body>
<h2>Async Iteration with Promises</h2>
<div id="output"></div>
<script>
  function asyncOperation(value) {
    return new Promise(resolve => {
      setTimeout(() => {
        document.getElementById('output').innerHTML += `<p>Processed: ${value}</p>`;
        resolve(value);
      }, 1000);
    });
  }

  const asyncIterable = {
    [Symbol.asyncIterator]: async function* () {
      for (let i = 1; i <= 3; i++) {
        yield await asyncOperation(i);
      }
    },
  };

  async function processAsyncIterable() {
    for await (const result of asyncIterable) {
      document.getElementById('output').innerHTML += `<p>Received: ${result}</p>`;
    }
  }

  processAsyncIterable();
</script>
</body>
</html>

示例 2:使用 Fetch API 执行异步 HTTP 请求

在此，我们演示如何使用 Fetch API 进行异步迭代来执行 HTTP 请求:asyncIterable 以异步方式获取数据。此外，它使用"for await...of"循环优雅地遍历结果，展示了异步迭代如何与外部源数据检索无缝融合。

<!DOCTYPE html>
<html>
<body>
<h2>Async Iteration with Fetch API</h2>
<div id="output"></div>
<script>
  const url = 'https://jsonplaceholder.typicode.com/todos/';
  const asyncIterable = {
    [Symbol.asyncIterator]: async function* () {
      for (let i = 1; i <= 3; i++) {
        const response = await fetch(`${url}${i}`);
        const data = await response.json();
        document.getElementById('output').innerHTML += `<p>Received: ${JSON.stringify(data)}</p>`;
        yield data;
      }
    },
  };

  async function processAsyncIterable() {
    for await (const result of asyncIterable) {
      // 上面已经显示结果，不需要额外输出。
    }
  }

  processAsyncIterable();
</script>
</body>
</html>

示例 3:使用回调

该方法采用基于回调的机制来实现异步迭代。函数 asyncOperation 模拟异步任务，并在完成后回调。同时，processAsyncIterable 函数主动迭代数组，并为每个元素调用异步操作。

<!DOCTYPE html>
<html>
<body>
<h2>Async Iteration with callback</h2>
<div id="output"></div>
<script>
  function asyncOperation(value, callback) {
    setTimeout(() => {
      document.getElementById('output').innerHTML += `<p>Processed: ${value}</p>`;
      callback(value);
    }, 1000);
  }

  function processAsyncIterable(iterable, callback) {
    const iterator = iterable[Symbol.iterator]();  
    function iterate() {
      const next = iterator.next();
      if (next.done) {        
        return;
      }

      const value = next.value;
      asyncOperation(value, result => {
        document.getElementById('output').innerHTML += `<p>Received: ${result}</p>`;
        iterate(); 
      });
    }
    iterate(); 
  }

  const asyncIterable = [5,6,7,8,9,10]; 
  processAsyncIterable(asyncIterable, result => {
    // 如果需要，您可以在此处处理最终结果或其他操作。
  });
</script>
</body>
</html>

示例 4:带有错误的 Promise

JavaScript 中的 .then() 方法使用一个或两个回调函数来管理 Promise 的成功解析:在 Promise 解析后，它会执行其第一个函数;如果发生拒绝，则执行可选的第二个函数。

.catch() 方法与 Promise 一起使用，专门用于处理 Promise 拒绝的情况。在 Promise 拒绝后，会执行一个回调函数;这为管理异步操作中的错误提供了一种优雅的解决方案 - 无需使用单独的 .then() 块来专门处理错误。

<!DOCTYPE html>
<html>
<head>
  <style>
    #output {
      margin-top: 20px;
    }
  </style>
</head>
<body>
<h2>Async Iteration with Promises</h2>
<button onclick="startAsyncIteration()">Start Async Iteration</button>
<div id="output"></div>
<script>
  function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  function fetchData(index) {
    return new Promise((resolve, reject) => {
      if (index < 5) {
        delay(1000).then(() => resolve(`Data ${index}`));
      } else {
        // 模拟索引 5 的错误
        reject(new Error('Error fetching data for index 5'));
      }
    });
  }

  function startAsyncIteration() {
    document.getElementById('output').innerHTML = '';
    let index = 0;
    function iterate() {
      fetchData(index)
        .then(data => {
          displayData(data);
          index++;
          if (index < 6) {
            iterate();
          }
        })
        .catch(error => {
          // 在页面上显示错误。
          displayError(error.message);
        });
    }
    iterate();
  }

  function displayData(data) {
    const outputDiv = document.getElementById('output');
    outputDiv.innerHTML += `<p>Data received: ${data}</p>`;
  }

  function displayError(errorMessage) {
    const outputDiv = document.getElementById('output');
    outputDiv.innerHTML += `<p style="color: red;">Error: ${errorMessage}</p>`;
  }
</script>
</body>
</html>

实际用例

在实际场景中，我们应用 JavaScript 异步迭代来优化各种异步操作:从 Web 应用程序中的多个 API 并发获取数据;处理实时更新(这对于聊天系统至关重要)以及执行批处理任务或需要大量资源的并行任务。此外，使用此技术可以管理文件操作和流，以及处理交互式网页上的并发用户交互。其他应用程序涉及处理来自物联网设备的数据并将内容动态加载到网页上，由于它们在处理复杂任务管理(例如离线优先应用程序的数据同步)时需要非阻塞效率和响应能力，因此使用异步迭代也大有裨益。