关于前端:JS入门到进阶-7条关于-async-await-的使用口诀新学-async-await背10遍以后要考快收藏

我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 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，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。