[JS入门到进阶] 7条关于 async await 的使用口诀，新学 async await？背10遍，以后要考！快收藏

持续创作，加速成长！

这是我的专栏​​《前端入门到进阶》​​，跟HullQin学前端，入门到进阶！带你进大厂！欢迎关注～

async await 使用口诀

1. async写函数前面，await写函数里面。
2. 函数没有async，一定也没await。
3. 函数不执行await，也可以有async。
4. 函数没有await，最好删掉async。
5. async函数直接return await，请把async await都丢掉。
6. 调用async函数却不await，你就只有破柔蜜丝。
7. 写了await又写then，指定要被老板炒；await和then不混用，我们还是好基友。

案例

1. async写函数前面，await写函数里面。

用function定义：

async function f() {
  await fetch('/');
}

用箭头函数定义：

const f = async () => {
  await fetch('/');
};

这个函数逻辑很简单，就是发送了个请求给这个​​/​​​的地址，而​​/​​​这个地址就表示当前的域名，即：​​https://juejin.cn/​​。理论上，它会把掘金首页的html文件给下载过来。

2. 函数没有async，一定也没await。

如果一个函数的前面没有写​​async​​​，那么它里面一定不要写​​await​​噢，不然会报错的！不信你看：

3. 函数不执行await，也可以有async。

如果一个函数里面，​​await​​​逻辑可能不会被执行，那么函数也是可以有​​async​​标识的！你能明白2和3的区别嘛？

它不会报错的，不信你看：

4. 函数没有await，最好删掉async。

如果一个函数里面没有​​await​​​调用，那么你完全可以删掉​​async​​​。此时，对函数的调用：​​await f1()​​​可以直接改为​​f1()​​。

5. async函数直接return await，请把async await都丢掉。

二者最终效果是一样的哦，但是丢掉后就少了一层async await，看起来更方便了呢。

6. 调用async函数却不await，你就只有破柔蜜丝。

调用async函数却不​​await​​​，你就只有​​Promise​​。

7. 写了await又写then，指定要被老板炒；await和then不混用，我们还是好基友。

被老板炒鱿鱼的写法：

const data = await fetch('https://api.juejin.cn/interact_api/v1/pin_tab_lead?aid=2608&uuid=')
  .then(r r.json());
console.log(data);

好的写法：

const res = await fetch('https://api.juejin.cn/interact_api/v1/pin_tab_lead?aid=2608&uuid=');
const data = await res.json();
console.log(data);

写在最后

我是HullQin，独立开发了​​《联机桌游合集》​​​，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，绝不收费，绝无广告，​​点这就能开始玩​​​。还独立开发了​​《合成大西瓜重制版》​​​。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：​​《教你做小游戏》​​​、​​《极致用户体验》​​。