在前端开发中，我们经常会遇到需要处理异步请求的情况。当多个异步请求需要协同工作时，我们可能需要使用异步函数和组合等待来管理它们的执行顺序和结果。
异步函数
异步函数是一种特殊的函数，其返回值是一个 promise 对象，可以使用 await 关键字来等待异步操作完成后再进行下一步操作。举个例子：
async function getData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
}上述代码中的 getData 函数通过 fetch 方法异步获取数据，并返回一个包含数据的 promise 对象。使用 await 关键字等待异步操作完成后，再将 json 数据转换为 JavaScript 对象并返回。
组合等待
当多个异步操作需要协同工作时，我们可能需要等待所有异步操作完成后再对结果进行处理。这时可以使用 Promise.all 方法来组合等待多个 promise 对象的完成状态：
async function getAllData() {
const urls = ['https://example.com/data1', 'https://example.com/data2'];
const promises = urls.map(url => fetch(url).then(response => response.json()));
const results = await Promise.all(promises);
return results;
}上述代码中的 getAllData 函数使用数组的 map 方法遍历 url 数组，将每个 url 转换为一个获取数据的 promise 对象。接着使用 Promise.all 方法等待所有 promise 对象完成，并返回一个包含所有异步操作结果的数组。
setTimeout
当涉及到延迟执行代码时，我们可以使用 setTimeout 方法来指定在一段时间后执行某个操作：
setTimeout(() => {
console.log('Hello, world!');
}, 1000);上述代码中的 setTimeout 方法将在 1 秒钟后输出 "Hello, world!" 到控制台。
示例代码
下面是一个具体的示例，展示了如何使用异步函数、组合等待和 setTimeout 方法来处理多个异步请求并且延迟输出结果：
-- -------------------- ---- ------- ----- -------- ----------- - ----- ---- - ----------------------------- ----------------------------- ----- -------- - ------------ -- ------------------------ -- ------------------ ----- ------- - ----- ---------------------- ------ -------- - ----- -------- --------- - ------ --- --------------- -- ------------------- ----- - ----- -------- ---------------- - ----- ---- - ----- ------------ ----------------- --------- ------ ----- ------------ -------------------- --------- - -----------------
上述代码中的 fetchData 函数使用 Promise.all 方法等待所有异步请求完成，并返回结果。delay 函数用于延迟执行代码，processResults 函数则将这两个函数结合起来，先输出获取到的数据，然后延迟 2 秒再输出一条信息。
总结
通过使用异步函数、组合等待和 setTimeout 方法，我们可以更好地管理多个异步请求的执行顺序和结果。这种技术在前端开发中非常有用，并且可以帮助我们编写更加健壮和高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15069