devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

写好 JavaScript 异步代码的几个技巧

作者：代码探险家 | 2024-08-21 05:00:19

赞

踩

no-promise-executor-return

今天给大家来推荐几个写好 JavaScript 异步代码的推荐做法，每种场景都有一个对应的 eslint 规则，大家可以选择去配置一下。

no-async-promise-executor

不建议将 async 函数传递给 new Promise 的构造函数。

  1. // ❌
  2. new Promise(async (resolve, reject) => {});
  3.  
  4. // ✅
  5. new Promise((resolve, reject) => {});

首先，你在 Promise 的构造函数里去使用 async ，那么包装个 Promise 可能就是没啥必要的。另外，如果 async 函数抛出了异常，新构造的 promise 实例并不会 reject ，那么这个错误就捕获不到了。

no-await-in-loop

不建议在循环里使用 await，有这种写法通常意味着程序没有充分利用 JavaScript 的事件驱动。

  1. // ❌
  2. for (const url of urls) {
  3.   const response = await fetch(url);
  4. }

建议将这些异步任务改为并发执行，这可以大大提升代码的执行效率。

  1. // ✅
  2. const responses = [];
  3. for (const url of urls) {
  4.   const response = fetch(url);
  5.   responses.push(response);
  6. }
  7.  
  8. await Promise.all(responses);

no-promise-executor-return

不建议在 Promise 构造函数中返回值，Promise 构造函数中返回的值是没法用的，并且返回值也不会影响到 Promise 的状态。

  1. // ❌
  2. new Promise((resolve, reject) => {
  3.   return result;
  4. });

正常的做法是将返回值传递给 resolve，如果出错了就传给 reject。

  1. // ✅
  2. new Promise((resolve, reject) => {
  3.   resolve(result);
  4. });

require-atomic-updates

不建议将赋值操作和 await 组合使用，这可能会导致条件竞争。

看看下面的代码，你觉得 totalPosts 最终的值是多少？

  1. // ❌
  2. let totalPosts = 0;
  3.  
  4. async function getPosts(userId) {
  5.   const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
  6.   await sleep(Math.random() * 1000);
  7.   return users.find((user) => user.id === userId).posts;
  8. }
  9.  
  10. async function addPosts(userId) {
  11.   totalPosts += await getPosts(userId);
  12. }
  13.  
  14. await Promise.all([addPosts(1), addPosts(2)]);
  15. console.log('Post count:', totalPosts);

totalPosts 会打印 3 或 5，并不会打印 8，你可以在浏览器里自己试一下。

问题在于读取 totalPosts 和更新 totalPosts 之间有一个时间间隔。这会导致竞争条件，当值在单独的函数调用中更新时，更新不会反映在当前函数范围中。因此，两个函数都会将它们的结果添加到 totalPosts 的初始值0。

避免竞争条件正确的做法：

  1. // ✅
  2. let totalPosts = 0;
  3.  
  4. async function getPosts(userId) {
  5.   const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
  6.   await sleep(Math.random() * 1000);
  7.   return users.find((user) => user.id === userId).posts;
  8. }
  9.  
  10. async function addPosts(userId) {
  11.   const posts = await getPosts(userId);
  12.   totalPosts += posts; // variable is read and immediately updated
  13. }
  14.  
  15. await Promise.all([addPosts(1), addPosts(2)]);
  16. console.log('Post count:', totalPosts);

max-nested-callbacks

防止回调地狱，避免大量的深度嵌套：

  1. /* eslint max-nested-callbacks: ["error", 3] */
  2.  
  3. // ❌
  4. async1((err, result1) => {
  5.   async2(result1, (err, result2) => {
  6.     async3(result2, (err, result3) => {
  7.       async4(result3, (err, result4) => {
  8.         console.log(result4);
  9.       });
  10.     });
  11.   });
  12. });
  13.  
  14. // ✅
  15. const result1 = await asyncPromise1();
  16. const result2 = await asyncPromise2(result1);
  17. const result3 = await asyncPromise3(result2);
  18. const result4 = await asyncPromise4(result3);
  19. console.log(result4);

回调地狱让代码难以阅读和维护，建议将回调都重构为 Promise 并使用现代的 async/await 语法。

no-return-await

返回异步结果时不一定要写 await ，如果你要等待一个 Promise，然后又要立刻返回它，这可能是不必要的。

  1. // ❌
  2. async () => {
  3.   return await getUser(userId);
  4. }

从一个 async 函数返回的所有值都包含在一个 Promise 中，你可以直接返回这个 Promise。

  1. // ✅
  2. async () => {
  3.   return getUser(userId);
  4. }

当然，也有个例外，如果外面有 try...catch 包裹，删除 await 就捕获不到异常了，在这种情况下，建议明确一下意图，把结果分配给不同行的变量。

  1. // 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/1010137
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。