大家好，我是进阶学习者。1.前言Async/await是一种为了更舒服地使用promise的特殊语法，也非常容易理解和使用。2.异步功能让我们从关键字async开始。它可以放在函数之前。看起来像这样：asyncfunctionf(){return1;}函数前面的“async”这个词表达了一个简单的意思：这个函数总是返回一个promise。其他值将自动包装在已解决的承诺中。例如，下面的函数返回一个resolvedpromise，结果为1。我们来测试一下：asyncfunctionf(){return1;}f().then(alert);//1也可以显式返回一个promise，结果就是同：asyncfunctionf(){returnPromise.resolve(1);}f().then(alert);//1注意：async保证函数返回一个promise，同时也在其中包装了非promise值。很简单，对吧？但还有更多。还有一个名为await的关键字，它只能在异步函数中使用，而且也很酷。3.等待1。语法//仅适用于异步函数letvalue=awaitpromise;关键字await让JavaScript引擎等待，直到承诺完成（结算）并返回结果。这里的例子是一个在1秒后resolve的promise：asyncfunctionf(){letpromise=newPromise((resolve,reject)=>{setTimeout(()=>resolve("done!"),1000)});letresult=awaitpromise;//等到promiresolve(*)alert(result);//“完成！”}f();代码分析：当这个函数执行时，它在(*)行“暂停”，并在promisesetting时，获取result作为result，继续执行。所以上面的代码显示“完成！”一秒钟后。await的字面意思是让JavaScript引擎等待，直到promise结算，然后以promise的结果继续执行。这种行为不会消耗任何CPU资源，因为引擎可以同时处理其他任务：执行其他脚本，处理事件等。与promise.then相比，它只是一种更优雅的获取promise结果的语法，也更容易读写。await不能用在普通函数中。如果尝试在非async函数中使用await，会报语法错误：functionf(){letpromise=Promise.resolve(1);letresult=awaitpromise;//Syntaxerror}如果前面没有async关键字的功能，你会得到一个语法错误。如前所述，await仅适用于异步函数。showAvatar()示例，并将其重写为异步/等待形式：您需要将.then调用替换为等待。此外，函数需要以async关键字作为前缀才能工作。asyncfunctionshowAvatar(){//读取JSONletresponse=awaitfetch('/article/promise-chaining/user.json');letuser=awaitresponse.json();//读取github用户信息letgithubResponse=awaitfetch(`https://api.github.com/users/${user.name}`);letgithubUser=awaitgithubResponse.json();//显示头像letimg=document.createElement('img');img.src=githubUser.avatar_url;img.className="promise-avatar-example";document.body.append(img);//等待3秒awaitnewPromise((resolve,reject)=>setTimeout(resolve,3000));img.remove();returngithubUser;}showAvatar();简单明了，对吧？比以前好多了。await不能在顶层代码中运行。下面是用于演示的Thenable类示例。下面的await接受这??个类的例子：classThenable{constructor(num){this.num=num;}then(resolve,reject){alert(resolve);//1000ms后使用this.num*2resolvesetTimeout(()=>resolve(this.num*2),1000);//(*)}};asyncfunctionf(){//等待1秒，结果变为2letresult=awaitnewThenable(1);alert(result);}f();运行结果：注意：如果await接收到一个不是promise但提供.then方法的对象，它会调用.then方法并使用内置函数resolve和reject作为参数传入（只是就像普通的Promise执行者一样）。然后await等待直到调用这两个函数之一（在上面的示例中它发生在第(*)行），然后使用结果继续执行后续任务。2.Class中的async方法在类中声明一个async方法，只需要在对应的方法前面加上async:classWaiter{asyncwait(){returnawaitPromise.resolve(1);}}newWaiter().wait().then(alert);//1运行结果：注意：保证方法的返回值是promise，方法中可以使用await。4.小结本文基于JavaScript基础，介绍async的使用。函数前面的关键字async做了两件事：它让函数总是返回一个promise。此函数内部允许等待。这两个关键字一起为编写易于阅读和编写的异步代码提供了一个很好的框架。通过对案例的细分分析，图文结合，详尽的讲解，JavaScript语言的运用，让读者更好的理解。代码很简单，希望能帮助大家更好的学习。
