ES8中async和await的用法详细的总结

async 和 await 是 ES8（ECMAScript 2017）引入的两个关键字，用于处理异步操作。它们基于 Promise，使得异步代码的编写和阅读变得更加简洁和直观。通过这两个关键字，开发者可以避免回调地狱（callback hell），以同步的方式编写异步代码。

1. async 函数

async 是一个关键字，用于声明一个异步函数。异步函数返回一个 Promise，它的返回值会被 Promise.resolve() 包裹。如果函数内部抛出错误，它会被自动转换为 Promise 的拒绝状态（rejected）。

1.1 声明 async 函数 async function myFunction() { return "Hello, World!"; } myFunction().then(result => console.log(result)); // "Hello, World!"

async 表示该函数是异步函数，函数返回值将会是一个 Promise。 在这个例子中，myFunction 函数返回的是一个 Promise，其值为 “Hello, World!”。

1.2 异常处理

async 函数内部的错误会被自动包装为 Promise 的拒绝，使用 .catch() 或 try/catch 可以捕获这些错误。

async function myFunction() { throw new Error("Something went wrong"); } myFunction().catch(err => console.log(err.message)); // "Something went wrong" 2. await 关键字

await 只能在 async 函数内部使用。它用于等待一个 Promise 对象的解决（resolve）或拒绝（reject），并且它会暂停 async 函数的执行，直到 Promise 完成。

2.1 基本用法 async function myFunction() { let result = await someAsyncTask(); console.log(result); }

await 会等待 someAsyncTask() 完成，然后将结果赋值给 result，再继续执行后续的代码。

2.2 异步操作的顺序控制

await 会确保异步操作按顺序执行，而不需要使用多个 then() 链式调用。这样写异步代码更像是同步代码。

async function fetchData() { const data1 = await fetch(' api.example /data1'); const data2 = await fetch(' api.example /data2'); console.log(data1, data2); }

上面这段代码会依次等待 data1 和 data2 的结果。在 data1 请求完成后，才会发起 data2 请求。

2.3 await 与 Promise.all()

如果你需要并行执行多个异步操作，可以使用 Promise.all() 来加速异步任务的执行，await 与 Promise.all() 配合使用，所有 Promise 会并行执行，等待所有任务完成。

async function fetchData() { const [data1, data2] = await Promise.all([ fetch(' api.example /data1'), fetch(' api.example /data2') ]); console.log(data1, data2); }

这段代码会并行请求 data1 和 data2，等待两个请求都完成后再继续执行。

3. async 和 await 的常见应用 3.1 顺序执行异步任务

如果有多个异步任务需要按顺序执行，可以通过 await 来保证每个任务依次执行。

async function taskSequence() { const task1 = await doTask1(); const task2 = await doTask2(); const task3 = await doTask3(); console.log(task1, task2, task3); } 3.2 错误处理

使用 try/catch 块来捕获异步函数中的错误。

async function fetchData() { try { const data = await fetch(' api.example /data'); const json = await data.json(); console.log(json); } catch (error) { console.log('Error:', error); } }

如果 fetch 或 json 方法发生错误，catch 会捕获并处理错误。

3.3 使用 async 和 await 实现异步返回值

异步函数可以返回一个 Promise，await 会暂停代码执行，直到 Promise 完成并返回结果。

async function add(a, b) { return a + b; } async function main() { const result = await add(1, 2); console.log(result); // 3 } main();

add 函数返回的是 Promise，await 会等待它完成，并返回加法结果。

3.4 使用 async 和 await 获取多个 API 请求

当你需要从多个 API 获取数据时，可以使用 async 和 await 来简化代码：

async function getUserData() { try { const user = await fetch(' api.example /user'); const userData = await user.json(); const posts = await fetch(' api.example /posts'); const postsData = await posts.json(); console.log(userData, postsData); } catch (error) { console.error('Error:', error); } }

async/await 使得多个异步请求的代码更清晰，避免了传统回调地狱的问题。

4. async 和 await 的限制

await 只能在 async 函数内部使用：await 不能直接在普通函数或顶层作用域中使用，必须在 async 函数中。

// 错误 const result = await fetch(' example '); // SyntaxError // 正确 async function fetchData() { const result = await fetch(' example '); }

await 等待 Promise：await 只会等待 Promise 对象，其他类型的值（如数字、字符串）将立即返回。

async function test() { const result = await 42; console.log(result); // 42，直接返回值 } 5. 总结 async：声明异步函数，函数会返回一个 Promise。await：等待 Promise 的结果，能够暂停 async 函数的执行，直到 Promise 完成。async/await 使得异步代码更加简洁、可读，避免了回调地狱。在处理多个异步操作时，await 可以与 Promise.all() 配合使用，实现并行执行。异常处理使用 try/catch，更易于捕获和处理异步代码中的错误。通过 async 和 await，你可以像编写同步代码一样编写异步代码，使代码更加简洁、易于维护和调试。