在 JavaScript 中,异步编程一直都是一个重要的话题。以前我们通过使用回调函数来解决异步问题,但这样会造成“回调地狱”的问题。随着 ES7 的发布,async/await 成为了处理异步任务的更好的选择。它可以使代码更加可读性和易于维护。
什么是 async/await?
async/await 是一种新的方法来处理异步操作,其本质上只是 Generator 函数语法糖的简化版。async 函数标记为异步函数,表示它返回的是一个 Promise
对象,而 await 表达式则会暂停当前异步代码的执行,等待 Promise 对象 resolve/reject 并返回结果。
async function hello() { return "Hello, world!"; } hello().then(result => console.log(result)); // output: "Hello, world!"
这里的 hello()
返回的是一个 Promise
对象,因此我们可以使用 .then()
方法来获取返回值。
-- -------------------- ---- ------- ----- -------- ------------------ - -- ---- - - -- --- - ---- - ----- --- ------------- --- -- --------- - ------ ---- - ------ ---------- - --- - ----- ------- - ----- ------------------ --------------------- -- ------- -- ----- ------- - ----- ------------------ -- --- ---- --------- ----- -- ----- ----- --- - ----- ------- - --------------------------- -- ------- ------- --- -- ------- - -----
在上述代码中,numberInRange()
函数用于检查一个数字是否介于 0 和 100 之间。如果不是,则抛出一个错误。接着我们调用该函数两次:第一次参数为 50
,返回正确;而第二次参数为 -1
,抛出错误,然后跳到 catch
块。
为何要使用 async/await?
使用 async/await 的好处有:
- 清晰的异步流程:使用 async/await 可以使异步流程更加易于阅读和维护,避免回调函数造成的代码混乱。
- 更少的错误处理:使用
try/catch
块可以轻松处理异步错误,并且它们的语法结构比传统的错误回调更加直观。 - 翻译已有代码:之前的基于 Promise 的异步代码可以通过 async/await 重写为更容易理解的形式。
使用 async/await 的注意事项
虽然 async/await 看起来非常方便,但也要注意一些坑点:
- 在一个 async/await 函数内部使用 return 语句会导致 Promise 对象被 resolve,并且 resolve 的值就是返回的参数值。
- 自动捕获异常:当 await 表达式抛出异常时,整个表达式会被包装为一个被 reject 的 Promise 对象,并且异常信息将自动传递到被 reject 的 Promise 中。
- 多个 await 表达式并行执行:如果多个 await 表达式不互相依赖,可以在一个 async 函数中使用它们来并行地发起一些异步请求。
-- -------------------- ---- ------- ----- -------- ------------ - --- - ----- ------- ------ - ----- ------------- --------------------------------- -- ----------------- --------------------------------- -- ---------------- --- ------------------ ------- - ----- ------- - ------------------ -------- ----- -- ------- ------- - -
结论
async/await 是一种新的处理异步操作的方法,在使用时要注意一些细节。它具有非常好的可读性、易维护性以及清晰的异步流程结构,是值得学习掌握的技术。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/672d6883ddd3a70eb6da4ebb