在现代的前端开发中，异步操作已经成为了必不可少的一部分。ES6 引入了 Promise 对象来简化异步操作，而 ES7 中的 async/await 更是让异步操作变得更加简单易用。而在 ES9 中，for-await-of 和 Promise.all() 的结合应用则更加方便了我们对异步操作的处理。
for-await-of
在 ES9 中，我们可以使用 for-await-of 来循环异步操作。它可以遍历异步操作返回的 Promise 对象，并在 Promise 对象 resolve 之后执行下一步操作。我们可以使用 async/await 来定义异步操作，然后使用 for-await-of 循环执行这些操作。下面是一个简单的示例：
// javascriptcn.com 代码示例
async function asyncFunc() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Hello');
}, 1000);
});
}
(async function() {
for await (const result of [asyncFunc(), 'World']) {
console.log(result);
}
})();在这个示例中，我们定义了一个异步函数 asyncFunc，它会在 1 秒钟后 resolve 'Hello'。我们将 asyncFunc 和 'World' 放在一个数组中，并使用 for-await-of 循环遍历这个数组。在遍历 asyncFunc 返回的 Promise 对象时，for-await-of 会等待 Promise resolve 后才执行下一步操作。最终输出结果为：
Hello World
Promise.all()
在前端开发中，我们经常需要同时处理多个异步操作，这时 Promise.all() 就能派上用场了。Promise.all() 接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。当传入的所有 Promise 对象都 resolve 时，Promise.all() 返回的 Promise 对象也会 resolve，返回的结果为一个数组，数组中包含了每个 Promise resolve 的结果。如果有任何一个 Promise reject，则整个 Promise.all() 返回的 Promise 对象也会 reject。
下面是一个简单的示例：
// javascriptcn.com 代码示例
async function asyncFunc1() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Hello');
}, 1000);
});
}
async function asyncFunc2() {
return new Promise(resolve => {
setTimeout(() => {
resolve('World');
}, 2000);
});
}
(async function() {
const results = await Promise.all([asyncFunc1(), asyncFunc2()]);
console.log(results);
})();在这个示例中，我们定义了两个异步函数 asyncFunc1 和 asyncFunc2，它们分别在 1 秒钟和 2 秒钟后 resolve 'Hello' 和 'World'。我们将这两个异步函数放在一个数组中，并使用 Promise.all() 来同时执行它们。最终输出结果为：
[ 'Hello', 'World' ]
结合应用
结合使用 for-await-of 和 Promise.all() 可以让我们更加方便地处理多个异步操作。我们可以使用 for-await-of 循环遍历异步操作数组，并在每个异步操作执行完毕后将结果 push 到一个新的数组中。最后，我们再使用 Promise.all() 来执行这个新的数组中的异步操作，并在所有异步操作执行完毕后返回结果。
下面是一个示例代码：
// javascriptcn.com 代码示例
async function asyncFunc1() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Hello');
}, 1000);
});
}
async function asyncFunc2() {
return new Promise(resolve => {
setTimeout(() => {
resolve('World');
}, 2000);
});
}
(async function() {
const results = [];
for await (const result of [asyncFunc1(), asyncFunc2()]) {
results.push(result);
}
const finalResults = await Promise.all(results);
console.log(finalResults);
})();在这个示例中，我们定义了两个异步函数 asyncFunc1 和 asyncFunc2，它们分别在 1 秒钟和 2 秒钟后 resolve 'Hello' 和 'World'。我们将这两个异步函数放在一个数组中，并使用 for-await-of 循环遍历它们。在每个异步操作 resolve 后，我们将结果 push 到一个新的数组中。最后，我们使用 Promise.all() 来执行这个新的数组中的异步操作，并在所有异步操作执行完毕后返回结果。最终输出结果为：
[ 'Hello', 'World' ]
总结
ES9 中的 for-await-of 和 Promise.all() 的结合应用可以让我们更加方便地处理多个异步操作。我们可以使用 for-await-of 循环遍历异步操作数组，并在每个异步操作执行完毕后将结果 push 到一个新的数组中。最后，我们再使用 Promise.all() 来执行这个新的数组中的异步操作，并在所有异步操作执行完毕后返回结果。这种结合应用可以让我们更加高效地处理异步操作，提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656dc617d2f5e1655d602d50