在现代 web 应用程序中，异步加载数据是常见的操作。ES9 在 异步编程方面，引入了许多新概念和特性，使得编写异步代码变得更加简单和流畅。在本文中，我们将探讨如何使用 ES9 中的异步操作符，以及如何处理异步加载的数据。
Async / Await
最有可能在 ES9 中被广泛使用的新功能是 async/await。这是一种新的语言级别的构造，用于处理异步代码。在以前，我们通常会使用回调函数和 Promise 来管理异步代码的执行。但这些方法不仅使代码难以维护，而且容易出现 callback hell。
一个 async 函数返回一个 Promise，这个 Promise 在函数完成时变为 resolved 状态，并且 resolved 的值等于 async 函数的返回值。
以下是一个实现异步加载数据的 async 函数的示例：
// javascriptcn.com 代码示例
async function loadData() {
const response = await fetch('http://api.example.com/data');
const data = await response.json();
return data;
}
loadData().then(data => {
// 处理数据...
}).catch(error => {
// 处理错误...
});异步函数使用 await 操作符等待异步操作完成，并返回结果。在上面的示例中，我们等待 fetch() 函数返回成功响应的对象，然后我们等待 response.json() 函数返回解析的 JSON 数据。这就是 async/await 的优点 - 能够以同步的方式处理异步代码。
Promise.allSettled
除了 async/await，ES9 还引入了一个叫做 Promise.allSettled 的新方法，用于处理多个 Promise。这个方法接收一个 Promise 数组作为参数，并返回一个新的 Promise 数组，该数组表示每个 Promise 的执行结果。
以下是一个实现同时加载多个数据的示例：
// javascriptcn.com 代码示例
async function loadAllData() {
const urls = ['http://api.example.com/data1', 'http://api.example.com/data2', 'http://api.example.com/data3'];
const promises = urls.map(url => fetch(url).then(response => response.json()));
const results = await Promise.allSettled(promises);
return results.map(result => result.value);
}
loadAllData().then(data => {
// 处理数据...
}).catch(error => {
// 处理错误...
});在上面的示例中，我们使用 Promise.allSettled() 方法加载多个数据。该方法返回一个 Promise 数组，其中每个 Promise 数组表示每个 URL 的数据加载结果。最终，我们将结果映射到一个数组，以便使用它们。
总结
异步编程在现代 web 应用程序中是必不可少的。ES9 中的 async/await 和 Promise.allSettled 让异步编程变得更加简单和流畅。在编写异步代码时，请记住使用这些新特性，它们将大大提高您的代码的可读性和维护性。下面的代码片段示范了如何使用 Promises 和 async/await 操作符。
// javascriptcn.com 代码示例
async function fetchData(url) {
const response = await fetch(url);
const data = await response.json();
return data;
}
(async () => {
try {
const data1 = await fetchData('https://example.com/data1');
const data2 = await fetchData('https://example.com/data2');
console.log('data1:',data1)
console.log('data2:',data2)
// your code to process both data1 and data2
} catch (e) {
console.error(e)
}
})()来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652137ca95b1f8cacd8b92d4