10个必备的 async/await 工具函数

偷偷吻了一下风

| 当谈到异步编程时，async/await是JavaScript中常用的功能之一。下面是10个常用的await和async函数示例，以及对它们的代码用途的解析：
1.异步获取数据

1. async function fetchData() {
2.   const response = await fetch('https://api.example.com/data');
3.   const data = await response.json();
4.   return data;
5. }

复制代码

 
该函数使用await关键字等待异步请求返回的数据，并将其解析为JSON格式。这样，我们可以在代码中以同步的方式处理数据，而无需使用回调函数。
2.异步执行多个任务

1. async function performTasks() {
2.   const task1 = doTask1();
3.   const task2 = doTask2();
4.   await Promise.all([task1, task2]);
5.   console.log('Tasks completed');
6. }

复制代码

 
在这个例子中，我们使用await等待多个任务同时完成。Promise.all接收一个包含多个任务的数组，并返回一个新的Promise，直到所有任务都完成才会解析。
3.处理异步错误

1. async function fetchData() {
2.   try {
3.     const response = await fetch('https://api.example.com/data');
4.     const data = await response.json();
5.     return data;
6.   } catch (error) {
7.     console.log('Error:', error);
8.     throw error;
9.   }
10. }

复制代码

 
在这个示例中，我们使用try/catch块来捕获可能出现的异步错误。如果发生错误，它将被捕获并打印出来，然后被重新抛出。
4.顺序执行异步任务

1. async function performTasks() {
2.   await doTask1();
3.   await doTask2();
4.   console.log('All tasks completed');
5. }

复制代码

 
这个函数按照顺序执行两个异步任务，并在两个任务都完成后打印一条消息。
5.异步循环

1. async function processItems(items) {
2.   for (const item of items) {
3.     await processItem(item);
4.   }
5.   console.log('All items processed');
6. }

复制代码

 
在这个例子中，我们使用await在循环中处理每个项目。在处理完所有项目后，将打印一条消息。
6.延迟执行

1. function delay(ms) {
2.   return new Promise(resolve => setTimeout(resolve, ms));
3. }
5. async function delayedTask() {
6.   console.log('Task started');
7.   await delay(2000);
8.   console.log('Task completed');
9. }

复制代码

 
delay函数返回一个Promise，经过指定的延迟时间后解析。在delayedTask函数中，我们使用await让任务在经过2秒的延迟后才继续执行。
7.条件异步执行

1. async function performTask(condition) {
2.   if (condition) {
3.     await doTask1();
4.   } else {
5.     await doTask2();
6.   }
7.   console.log('Task completed');
8. }

复制代码

 
在这个示例中，我们使用条件语句来决定要执行的异步任务。根据条件的不同，将执行不同的任务，并在任务完成后打印一条消息。
8.并行执行异步任务

1. async function performTasks() {
2.   const [result1, result2] = await Promise.all([doTask1(), doTask2()]);
3.   console.log('Tasks completed:', result1, result2);
4. }

复制代码

 
通过使用Promise.all和解构赋值，我们可以并行执行多个异步任务，并在它们都完成后获取结果。
9.处理多个并发请求

1. async function fetchData() {
2.   const [data1, data2] = await Promise.all([
3.     fetch('https://api.example.com/data1').then(response => response.json()),
4.     fetch('https://api.example.com/data2').then(response => response.json())
5.   ]);
6.   console.log('Data fetched:', data1, data2);
7. }

复制代码

 
在这个示例中，我们使用Promise.all来并发请求多个数据源，并等待它们的响应。一旦所有数据都被解析为JSON格式，我们就可以对其进行处理。
10.链式异步操作

1. async function performTasks() {
2.   const result = await doTask1()
3.     .then(response => doTask2(response))
4.     .then(result2 => doTask3(result2));
5.   console.log('Tasks completed:', result);
6. }

复制代码

 
在这个示例中，我们使用.then方法将多个异步任务链接在一起。doTask1完成后，它的结果将传递给doTask2，然后再将结果传递给doTask3。最终的结果将在最后的.then块中获取并打印出来。
这些常用的await和async函数示例展示了在异步编程中如何使用它们。通过使用async/await，我们可以以更具可读性和简洁性的方式处理异步操作，并使代码结构更清晰。

来源:https://www.cnblogs.com/houxianzhou/p/17921756.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！