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

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

async await 使用口诀

async写函数前面，await写函数里面。
函数没有async，一定也没await。
函数不执行await，也可以有async。
函数没有await，最好删掉async。
async函数直接return await，请把async await都丢掉。
调用async函数却不await，你就只有破柔蜜丝。
写了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噢，不然会报错的！不信你看：

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

文章图片

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。
【[JS入门到进阶]|[JS入门到进阶] 7条关于 async await 的使用口诀，新学 async await（背10遍，以后要考！快收藏）】

文章图片

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

const data = https://www.it610.com/article/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 = https://www.it610.com/article/await res.json(); console.log(data);

文章图片

写在最后我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。