当前位置：首页 > news >正文

10个常见的async/await函数

news 来源：原创 2024/5/20 13:19:10

大家好，我是宝哥

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

1.异步获取数据

async function fetchData() {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('Network response was not ok');}const data = await response.json();return data;} catch (error) {console.log('Error:', error);throw error;}
}

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

2.异步执行多个任务

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

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

3.处理异步错误

async function fetchData() {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('Network response was not ok');}const data = await response.json();return data;} catch (error) {console.log('Error:', error);throw error;}
}

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

4.顺序执行异步任务

async function performTasks() {const result1 = await doTask1();const result2 = await doTask2();console.log('All tasks completed');
}

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

5.异步循环

async function processItems(items) {await Promise.allSettled(items.map(item => processItem(item)));console.log('All items processed');
}

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

6.延迟执行

function delay(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}async function delayedTask() {console.log('Task started');await delay(2000);console.log('Task completed');
}

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

7.条件异步执行

async function performTask(condition) {if (condition) {await doTask1();} else {await doTask2();}console.log('Task completed');
}

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

8.并行执行异步任务

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

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

9.处理多个并发请求

async function fetchData() {try {const [response1, response2] = await Promise.allSettled([fetch('https://api.example.com/data1'),fetch('https://api.example.com/data2')]);if (response1.status !== 200 || response2.status !== 200) {throw new Error('One or more network requests failed');}const [data1, data2] = await Promise.all([response1.value.json(),response2.value.json()]);console.log('Data fetched:', data1, data2);} catch (error) {console.log('Error:', error);throw error;}
}

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

10.链式异步操作

async function performTasks() {try {const result1 = await doTask1();const result2 = await doTask2(result1);const result3 = await doTask3(result2);console.log('Tasks completed:',result1, result2, result3);} catch (error) {console.log('Error:', error);throw error;}
}