您会注意到,我们已经将代码包装在一个函数中,并且在async
关键字之前包含了function
关键字。这是必要的-您必须创建一个异步函数来定义代码块,在其中运行异步代码;如前所述,await
仅在异步函数内部起作用。
在myFetch()
函数定义内部,您可以看到代码与先前的Promise版本非常相似,但是有一些区别。无需.then()
在每个基于promise的方法的末尾链接块,只需await
在方法调用之前添加一个关键字,然后将结果分配给变量即可。该await
关键字使JavaScript的运行时暂停在此行代码,允许其他代码在此期间执行,直到异步函数调用返回其结果。完成后,您的代码将从下一行开始继续执行。例如:
let response = await fetch('coffee.jpg');
当该响应变为可用时,将由已实现的fetch()
Promise返回的响应分配给该response
变量,并且解析器会在此行暂停直到发生这种情况。一旦响应可用,解析器将移至下一行,从而从中创建Blob
出一行。该行还调用了一个基于异步诺言的方法,因此我们await
也在这里使用。当运算结果返回时,我们将其从myFetch()
函数中返回。
这意味着当我们调用该myFetch()
函数时,它将返回一个promise,因此我们可以将a链接.then()
到该函数的末尾,并在其中处理屏幕上显示的blob。
您可能已经在考虑“这真的很酷!”,而且您是对的-更少的.then()
代码包装块,而且大多数看起来就像是同步代码,因此非常直观。