有一种特殊的语法以一种更舒适的方式处理承诺,称为“async/await”。它非常容易理解和使用。
Async functions
让我们从async关键字开始。它可以放在函数前面,像这样:
函数前面的“async”一词意味着一件简单的事情:函数总是返回promise。其他值自动包装在已解析的承诺中。
例如,该函数返回一个已解析的promise,其结果为1;让我们测试它:
我们可以显式地返回一个promise,它是一样的:
因此,async确保该函数返回一个承诺,并将非承诺封装在其中。很简单,对吧?但不仅如此。还有另一个关键字await,它只在异步函数内部工作,非常酷。
Await
语法:
关键字await使JavaScript等待,直到promise解决并返回结果。
下面是一个承诺在1秒内解决的例子:
函数的执行“暂停”在(*)行,当promise结束时继续执行,result成为它的结果。所以上面的代码显示“done!”“一秒钟之内。
让我们强调一下:await实际上是暂停函数的执行,直到promise结束,然后使用promise结果继续执行。这不会消耗任何CPU资源,因为JavaScript引擎可以同时执行其他任务:执行其他脚本、处理事件等等。
这是一种比promise更优雅的获取promise结果的语法。然后,更容易读和写。
不能在常规函数中使用await
让我们以承诺链接一章中的showAvatar()为例,并使用async/await重写它:
我们需要替换。然后调用await。
我们也应该使函数异步,以使它们工作。
await在顶级代码中不起作用
刚刚开始使用await的人往往会忘记这样一个事实:我们不能在顶级代码中使用await。例如,这将不起作用:
但是我们可以把它包装成一个匿名异步函数,像这样:
等待接受“thenables”
像承诺。然后,await允许我们使用thenable对象(带有可调用then方法的对象)。其理念是,第三方对象可能不是承诺,但与承诺兼容:如果它支持.那么,与await一起使用它就足够了。
这是一个演示的Thenable类;下面的await接受它的实例:
如果await获得一个带有.then的非Promise对象,它将调用该方法,并提供内置函数resolve和reject作为参数(就像它对常规Promise executor所做的那样)。然后await等待,直到其中一个被调用(在上面的例子中,它发生在行(*)中),然后继续处理结果。
异步类方法
要声明一个异步类方法,只需在它的前面加上async:
错误处理
如果promise正常解析,则await promise返回结果。但是在拒绝的情况下,它抛出错误,就像在那一行有一个throw语句一样。
这段代码:
和这个是一样的:
在实际情况下,承诺可能需要一段时间才会被拒绝。在这种情况下,在await抛出错误之前会有延迟。
我们可以使用try..catch,和普通的throw一样:
在出现错误的情况下,控件跳转到catch块。我们也可以换行:
如果我们不 try…catch,然后异步函数f()调用生成的承诺将被拒绝。我们可以添加.catch来处理它:
如果我们忘记在那里添加.catch,那么我们会得到一个未处理的promise错误(在控制台中可见)。我们可以使用全局unhandledrejection事件处理程序来捕获这样的错误,如“带承诺的错误处理”一章所述。
async/await and promise.then/catch
当我们使用async/await时,我们很少需要.then,因为await处理等待我们的操作。我们可以经常try…catch代替.catch。这通常(但不总是)更方便。
但是在代码的顶层,当我们在任何异步函数之外时,我们在语法上不能使用await,所以通常的做法是添加.then/catch来处理最终结果或失败错误,就像上面例子中的(*)行。
async/await works well with Promise.all
当我们需要等待多个承诺时,我们可以用承诺来包装它们。一切都在等待:
领取专属 10元无门槛券
私享最新 技术干货