如何用async/await并行执行多个异步调用？MobX State Tree相关疑问

你遇到的问题其实很常见——直接在flow里顺序yield两个异步操作时，它们确实会串行执行，这不是MobX State Tree的flow特性本身导致的，而是generator函数的执行逻辑决定的：每遇到一个yield，generator就会暂停，直到这个异步操作完成才会继续执行下一行代码。

要实现并行执行，关键是先同时启动所有异步任务，再统一等待它们全部完成，具体可以通过Promise.all来实现，结合flow的写法如下：

正确的并行写法示例 #

假设你的call1和call2都是用flow定义的异步函数，比如：

const call1 = flow(function* () {
  const response = yield axios.post('/api/endpoint1');
  return response.data;
});

const call2 = flow(function* () {
  const response = yield axios.post('/api/endpoint2');
  return response.data;
});

要让它们并行执行，你需要先触发这两个flow（此时异步请求会立即发送），然后用Promise.all等待两者的结果：

const myParallelFlow = flow(function* () {
  // 1. 同时启动两个异步调用，不等待它们完成
  const task1 = call1();
  const task2 = call2();

  // 2. 等待两个任务都完成，这里的yield会等待Promise.all的结果
  const [result1, result2] = yield Promise.all([task1, task2]);

  // 3. 后续可以使用两个任务的结果
  console.log('结果1:', result1);
  console.log('结果2:', result2);
});

为什么这样能并行？ #

• 当你调用call1()和call2()时，它们内部的axios.post会立即发送HTTP请求，两个请求是同时发起的。
• Promise.all会把多个Promise包装成一个新的Promise，只有当所有传入的Promise都完成时，这个新Promise才会resolve，此时你就能拿到所有结果。

如果你用async版本的flow #

MobX State Tree也支持用async函数定义flow（需要注意版本兼容性），这种情况下写法和普通async/await的并行逻辑一致：

const myParallelFlow = flow(async function () {
  const task1 = call1();
  const task2 = call2();
  const [result1, result2] = await Promise.all([task1, task2]);
  
  // 处理结果
});

补充：为什么原来的写法会串行？ #

如果你的代码是这样的：

const mySerialFlow = flow(function* () {
  yield call1(); // 等待call1完全执行完才会执行下一行
  yield call2();
});

这和普通async函数里顺序await两个函数的效果一样——第二个任务必须等第一个完成才会启动，自然就是串行的了。

内容的提问来源于stack exchange，提问作者chobo2