JavaScript - 异步迭代

异步迭代

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

了解异步操作

简单来说，编程中的异步操作表示在等待完成期间不会阻碍程序执行的任务或过程。而不是在继续进行后续操作之前暂停每个操作结束;这些异步任务使程序能够：它继续执行其他职责，同时等待当前任务的完成。

使用 'for await...of' 循环

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

示例：使用 Promise

JavaScript 将 promise 作为管理异步操作的特征;这些 Promise 象征着异步任务的潜在结果，即完成或失败。值得注意的是，函数 asyncOperation 通过返回 promise 来模拟此类任务。“等待...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：使用回调

该方法采用基于 Callback 的机制来实现异步迭代。函数 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（）伴随 Promises，专门用于解决 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 {
	 	 	 	 // Simulate an error for index 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 => {
	 	 	 	 	 // Display error on the page.
	 	 	 	 	 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 并发获取数据;处理实时更新 - 对于聊天系统和执行需要大量资源的批处理任务或并行任务至关重要的功能。此外，使用这种技术可以管理文件操作和流，以及处理交互式网页上的并发用户交互。其他应用程序涉及处理来自 IoT 设备的数据，将内容动态加载到网页上，这些应用程序也从异步迭代的使用中受益匪浅，因为它们在处理复杂的任务管理（例如离线优先应用程序的数据同步）时需要非阻塞效率和响应能力。

<< JavaScript - Ajax JavaScript - Atomics 对象 (原子对象) >>