关于前端:js循环里的async和await最佳实践

一些 async/await 在 js 循环里的最佳实际。

筹备工作

const entries = {
  foo: 0,
  bar: 1,
  baz: 2,
};

const keys = ["foo", "bar", "baz"];

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const getValue = (key) => sleep(1000).then((v) => entries[key]);

最佳实际 1

不要在 forEach 里应用 await，用for 循环或其余不带 callback 的循环代替。

// bad
const run = async (_) => {console.log('start');
  keys.forEach(async key => {const value = await getValue(key);
    console.log(value)
  })
  console.log('end');
};

run();
// start
// end
// 0
// 1
// 2

如果想串行执行 await，应用for 循环或任何不带 callback 的循环。

// good
const run = async (_) => {console.log('start');
    for (let index = 0; index < keys.length; index++) {const key = keys[index]
      const value = await getValue(key)
      console.log(value);
    }
  console.log('end')
};

run();
// start
// 0
// 1
// 2
// end

并行执行await。

// good
const run = async (_) => {console.log('start');
  const promises = keys.map(async key => {const value = await getValue(key)
    console.log(value);
  });
  await Promise.all(promises)
  console.log('end');
};

run();
// start
// 0 1 2
// end

最佳实际 2

不要在 filter 和reduce里应用 await，能够await map 返回的 promise 数组而后再进行 filter 或reduce操作。

filter

const run = async (_) => {const promises = keys.map(getValue);
  const values = await Promise.all(promises)
  const lessThan1 = keys.filter((key, index) => {const value = values[index]
    return value < 1
  })
  console.log(lessThan1);
};

run();
// ['foo']

reduce

const run = async (_) => {const promises = keys.map(getValue)
  const values = await Promise.all(promises)
  const sum = values.reduce((sum, value) => sum + value)
  console.log(sum);
};

run();
// 3

参考链接

• JavaScript loops – how to handle async/await (lavrton.com)
• https://zellwk.com/blog/async…