这回彻底掌握 ES7 async/await 原理及使用

阅读时长 4 分钟读完

在 JavaScript 中,异步编程一直都是一个重要的话题。以前我们通过使用回调函数来解决异步问题,但这样会造成“回调地狱”的问题。随着 ES7 的发布,async/await 成为了处理异步任务的更好的选择。它可以使代码更加可读性和易于维护。

什么是 async/await?

async/await 是一种新的方法来处理异步操作,其本质上只是 Generator 函数语法糖的简化版。async 函数标记为异步函数,表示它返回的是一个 Promise 对象,而 await 表达式则会暂停当前异步代码的执行,等待 Promise 对象 resolve/reject 并返回结果。

这里的 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

纠错
反馈