文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

不要在循环await啦,异步操作的六个最佳实践!

2024-11-29 23:22

关注

前两天有个同学在面试中被问到了一个问题:“如果在请求多个不同的接口,那么应该如何去做?” 该同学回答说:“我们可以把这些接口放到一个数组中,然后通过 for 循环来循环请求!”

嗯...这确是是一个方式,不过这并不好。再加上异步问题现在已经成了面试中的常见问题,所以,今天咱们就来说一下 异步请求的最佳实践,帮助大家解决异步编程,以及面试问题。

01:不使用 await 的循环请求

我们不应该在循环内使用 await。 而是可以利用 promise.all 方法:

// ❌
async function fn(reqs) {
  const results = [];
  for (const req of reqs) {
    // 每次循环迭代都会延迟到整个异步操作完成
    results.push(await req);
  }
  return results;
}

// ✅
async function fn(reqs) {
  // 存储所有异步操作的 Promise
  const promises = reqs.map((req) => req);
  // 所有异步操作都已经开始,现在等待它们全部完成
  const results = await Promise.all(promises);
  return results
}

02:不要在 promise 中执行返回操作

不要在 Promise 构造函数中返回值。 从那里返回的值是无用的。 它们也不影响 Promise 的状态。

// ❌
new Promise((resolve, reject) => {
    // 返回没有意义
    if (b) {
        return result;
    }
});

// ✅
new Promise((resolve, reject) => {
    // 利用 resolve 传递
    if (b) {
        resolve(result);
        return;
    }
});

03:避免竞态问题

看以下代码,你认为最终打印会是多少?

// ❌
let totalPosts = 0;

async function getPosts(userId) {
  // 模拟获取用户的帖子数量
  const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
  // 模拟异步延迟
  await sleep(Math.random() * 1000);
  // 返回对应用户的帖子数量
  return users.find((user) => user.id === userId).posts;
}

async function sleep (time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

async function addPosts(userId) {
  // 将用户的帖子数量加到总帖子数上
  totalPosts += await getPosts(userId);
}

// 并行地获取两个用户的帖子数量,并在全部获取完毕后输出总帖子数
await Promise.all([addPosts(1), addPosts(2)]);
console.log('帖子数量:', totalPosts);

执行以上代码,你可能会打印 3 或 5,而不是 8。

这个原因就是因为 竞态条件 问题而导致的。当在单独的函数调用中更新值时,更新不会反映在当前函数作用域中。 因此,这两个函数都将其结果添加到初始的 TotalPosts 值 0 中。

以下是避免竞态条件的方式:

// ✅
let totalPosts = 0;

async function getPosts(userId) {
  const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
  await sleep(Math.random() * 1000);
  return users.find((user) => user.id === userId).posts;
}

async function sleep (time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

async function addPosts(userId) {
  const posts = await getPosts(userId);
  totalPosts += posts; // 变量被读取并立即更新
}

await Promise.all([addPosts(1), addPosts(2)]);
console.log('帖子数量:', totalPosts);

04:避免回调地狱

这个问题大家应该很好理解,直接看代码即可

// ❌
async1((err, result1) => {
  async2(result1, (err, result2) => {
    async3(result2, (err, result3) => {
      async4(result3, (err, result4) => {
        console.log(result4);
      });
    });
  });
});

// ✅
const result1 = await asyncPromise1();
const result2 = await asyncPromise2(result1);
const result3 = await asyncPromise3(result2);
const result4 = await asyncPromise4(result3);
console.log(result4);

05:避免直接返回 await

尽量避免直接返回 await ,特别是在需要 try..catch 的时候:

// ❌
async () => {
  try {
    return await getUser(userId);
  } catch (error) {
    // 输出错误
  }
}

// ✅
async () => {
  try {
    const user = await getUser(userId);
    return user;
  } catch (error) {
    // 输出错误
  }
}

06:reject 最好配合 Error 使用

// ❌
Promise.reject('这是一个错误');

// ✅
Promise.reject(new Error('这是一个错误'));


来源:程序员Sunday内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯