如何使用Promise实现流式数据传输，获取多阶段返回结果？

核心问题说明 #

你原来的写法无法实现需求，因为 Promise的状态一旦被resolve/reject就会凝固，无法二次变更，所以第一个resolve("pending")执行之后，后面的resolve(callToAnotherAPI())完全不会生效。

方案1：传入状态回调（最简单，兼容性最好） #

第一步：修改myPromise的定义，支持接收回调参数 #

async myPromise(onPending) {
  try {
    await callToAnAPI();
    // 第一个API调用完成，触发pending回调通知
    if (typeof onPending === 'function') onPending('pending');
    // 等待第二个API调用完成后返回最终结果
    return await callToAnotherAPI();
  } catch (err) {
    // 错误处理逻辑
    console.error('调用出错', err);
    throw err;
  }
}

第二步：调用时传入回调接收状态 #

async myPromise2(){
  const finalData = await functionFromOtherFile((status) => {
    // 这里就能拿到 'pending' 状态
    console.log(status);
  });
  // 这里拿到callToAnotherAPI()返回的最终数据
  console.log(finalData);
}

方案2：使用异步生成器（适合多阶段状态返回场景） #

第一步：修改myPromise为异步生成器函数 #

async function* myPromise() {
  await callToAnAPI();
  // 第一步返回pending状态
  yield 'pending';
  // 第二步返回第二个API的调用结果
  yield await callToAnotherAPI();
}

第二步：分步骤迭代获取状态和结果 #

async myPromise2(){
  const statusIterator = functionFromOtherFile();
  // 第一次迭代拿到pending状态
  const { value: pendingStatus } = await statusIterator.next();
  console.log(pendingStatus); // 输出 'pending'
  // 第二次迭代拿到第二个API的返回数据
  const { value: finalData } = await statusIterator.next();
  console.log(finalData); // 输出第二个接口的返回值
}

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