一、序言

Async/await 是以更宽敞的形式采用 promise 的一类特定句法，与此同时它也十分更易认知和采用。

二、Async function

让以 async 那个URL已经开始。它能被置放在两个抒发式后面。

如下表所示右图：

async function f() { return 1; }

在抒发式后面的 “async” 那个单字抒发了两个单纯的事：即那个抒发式常常回到两个 promise。其它值将手动被包装袋在两个 resolved 的 promise 中。

比如，上面那个抒发式回到两个结论为 1 的 resolved promise。

让试验呵呵：

async function f(){ return 1; } f().then(alert); // 1

也能显式地回到两个 promise，结论是一样的：

async function f() { return Promise.resolve(1); } f().then(alert); // 1

注：

async 确保了抒发式回到两个 promise，也会将非 promise 的纸包装袋进去。很单纯，对吧?但不仅仅这些。还有另外两个叫 await 的关键词，它只在 async 抒发式内工作，也十分酷。

三、Await

1. 句法

// 只在 async 抒发式内工作 let value = await promise;

URL await 让 JavaScript 引擎等待直到 promise 完成(settle)并回到结论。

这里的例就是两个 1 秒后 resolve 的 promise：

async function f() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve(“done!”), 1000) }); let result = await promise; // 等待，直到 promise resolve (*) alert(result); // “done!” } f();

代码解析：

那个抒发式在执行的时候，“暂停”在了 (*) 那一行，并在 promise settle 时，拿到 result 作为结论继续往下执行。所以上面这段代码在一秒后显示 “done!”。

await 字面的意思就是让 JavaScript 引擎等待直到 promise settle，然后以 promise 的结论继续执行。那个行为不会耗费任何 CPU 资源，因为引擎能与此同时处理其它任务：执行其它脚本，处理事件等。

相比于 p

不能在普通抒发式中采用 await。

如果尝试在非 async 抒发式中采用 await 的话，就会报句法错误：

function f() { let promise = Promise.resolve(1); let result = await promise; // Syntax error }

如果抒发式后面没有 async 关键字，就会得到两个句法错误。就像后面说的，await 只在 async 抒发式中有效。

showAvatar() 例子，并将其改写成 async/await 的形式：

需要用 await 替换掉 .then 的调用。

另外，需要在抒发式后面加上 async URL，以使它们能工作。

async function showAvatar() { // 读取的 JSON let response = await fetch(/article/promise-chaining/user.json); let user = await response.json(); // 读取 github 用户信息 letgithubResponse =await fetch(`https://api.github.com/users/${user.name}`); let githubUser = awaitgithubResponse.json();// 显示头像 let img = document.createElement(img); img.src = githubUser.avatar_url; img.className =“promise-avatar-example”; document.body.append(img); // 等待 3 秒 await new Promise((resolve, reject) => setTimeout(resolve, 3000)); img.remove(); return githubUser; } showAvatar();

简洁明了，是吧?比之前可强多了。await 不能在顶层代码运行。

这有两个用于演示的 Thenable 类

上面的 await 接受了该类的例子：

class Thenable { constructor(num) { this.num = num; } then(resolve, reject) { alert(resolve);// 1000ms 后采用 this.num*2 进行 resolve setTimeout(() => resolve(this.num * 2), 1000); // (*) } }; async function f() { // 等待 1 秒，之后 result 变为 2 let result = await new Thenable(1); alert(result); } f();

运行结论：