在 JavaScript 中,异步编程已经成为了一种必要的技能。在 ES6 中,我们可以通过 Promise 来实现异步操作,但是我们仍然需要手动处理回调函数、错误处理以及一些其他问题。ES8 引入了一种新的异步编程方式,async/await,可让我们编写更简洁、易读和可维护的异步代码。
async/await 初探
async 和 await 是 two keywords,是一种新的 language feature,实现了异步编程的一种新方式,在 ES7 中已经被标准化,并在 ES8 中成为了默认选项。
async 函数返回一个 Promise 对象,可以使用 then 方法进行异步操作。await 操作符可以在 async 函数中等待异步操作完成后返回结果值,而不必使用回调函数或者 then 方法。
以下是一个简单的例子:
----- -------- --------- - ----- ------ - ----- ---------------------------------------------- ----- ---- - ----- -------------- ------ ----- - ------------------- -- -------------------
这段代码调用了 fetch
方法获取 GitHub 上用户名为 octocat
的信息。fetch 方法返回一个 Promise 对象,在执行 async 函数体之前,await 停止函数的执行直到 Promise 对象返回 fulfilled 状态并返回数据,而不是 Promise 对象本身,因此我们可以将数据直接存储在一个 data 变量中,使代码易于阅读和理解。
实例详解
如何在需要执行多个异步操作的情况下使用 async/await?我们可以使用 Promise.all() 方法。
----- -------- --------- - ----- --------------- -------------- - ----- ------------- ---------------------------------------------- --------------------------------------------------- --- ----- --------- - ----- --------------------- ----- --------- - ----- --------------------- ------ - ----- ---------- ----- --------- -- - ------------------- -- -------------------
首先,我们使用了 Promise.all() 方法来同时调用两个 API。在 Promise.all() 返回 resolve 时,我们可以使用解构的方式获取两个 API 的返回值,并分别存储在 user_response 和 repo_response 变量中。
接下来,我们使用 await 关键字获取 user_response 和 repo_response 的 json data,并将其存储在 user_data 和 repo_data 变量中。
最后,我们将 user_data 和 repo_data 组合成一个对象并通过 console.log() 打印出来。
异常处理
async/await 还提供了更方便的错误处理方式。在 async 函数中,我们可以使用 try 和 catch 语句捕捉异步函数中的错误。这种方式比在 Promise 对象中使用 catch 语句更加简单和直接。
----- -------- --------- - --- - ----- -------- - ----- ------------------------------------ ----- ---- - ----- ---------------- ------------------ - ----- ------- - ------------------- - - ----------
在这个例子中,我们使用了 try 和 catch 语句来处理异常情况。如果 fetch 方法返回的状态码是 404, await 将会抛出一个异常,并将它存储在变量 error 中。我们直接使用 console.log() 方法输出这个异常,而不必将其传递给 catch() 方法中。
总结
async/await 是 ES8 中的一个新特性,提供了比 Promise 更加简单和易读的方式来处理异步操作。async 函数使用 Promise 来等待异步操作完成,await 关键字可以使用在只有 async 函数内的 Promise 对象前面。async/await 还提供了更加方便和直接的错误处理方式,来帮助我们编写更易于维护的异步代码。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65a5ea75add4f0e0ffe7d2ce