深入学习 ES7 中的 await
在 ES7 中，引入了一个新的关键字 await，它可以让我们更方便地处理异步操作，避免了回调函数嵌套的问题。今天，我们来深入学习 ES7 中的 await，了解它的用法、原理以及一些注意事项。
一、await 的用法
await 只能在 async 函数中使用，它的作用是暂停 async 函数的执行，等待 Promise 对象的状态改变，然后继续执行 async 函数。
我们来看一个简单的示例：
async function test() { let result = await fetch('https://jsonplaceholder.typicode.com/todos/1'); let json = await result.json(); console.log(json); } test();
在这个示例中，我们定义了一个 async 函数 test，在函数中使用 await 等待 fetch 方法返回的 Promise 对象的状态改变，然后获取响应数据并打印出来。由于使用了 await，代码看起来更加简洁易懂。
二、await 的原理
await 的本质是让 async 函数生成器一个 Promise 对象，然后等待这个 Promise 对象的状态改变。我们来看一下上面示例的代码转换后的写法：
-- -------------------- ---- ------- -------- ------ - ------ --- ------------------------- ------- - ----------------------------------------------------- ---------------------- - ------ -------------- -- -------------------- - -------------- -- ---------------------- - -------------- --- --- - -------------------------- - ------------------ ---展开代码
这里，我们将 async 函数转换成了 Promise 对象，在函数中通过 fetch 方法获取数据，并通过 Promise 对象返回结果。然后我们调用 test 函数，获取结果并打印出来。可以看到，使用 await 相比使用 Promise 对象的代码清晰度更高。
三、注意事项
await 只能在 async 函数中使用。
在 async 函数中，多个 await 语句按顺序执行，前面的 await 语句等待 Promise 对象状态改变后才会执行后面的 await 语句。
await 可以跟 Promise 对象，也可以跟普通值。如果跟普通值，则会直接将该值封装成 Promise 对象返回。
async function test() { let result = await 10; // Promise.resolve(10) console.log(result); } test();
- await 会抛出错误，需要使用 try-catch 语句处理。
-- -------------------- ---- ------- ----- -------- ------ - --- - --- ------ - ----- ------------------------------------------------------ --- ---- - ----- -------------- ------------------ - ----- ------- - ------------------- - - -------展开代码
总结
通过深入学习 ES7 中的 await，我们可以更好地处理异步操作，避免回调函数嵌套的问题，让代码更加简洁易懂。在实际开发中，我们可以将 await 和 async 应用到多个场景中，例如获取数据、操作 DOM 等。需要注意的是，await 只能在 async 函数中使用，并且要处理抛出的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65422bbf7d4982a6ebbd1666
