如何从setState回调中让外部函数返回API调用结果？

原问题分析 #

原函数func中，setState的回调内返回了API调用的Promise，但由于回调函数的返回值不会传递到外部func，导致外部无法获取API调用结果。

你的方案可行性验证 #

你提出的用Promise包裹setState的方案是可行的，但存在可以优化的地方：

• 无需在api.getInfo()后额外嵌套then返回response，因为api.getInfo()本身就是Promise，直接resolve这个Promise即可自动传递结果
• 未处理this.state.permissions.read为false的场景，此时Promise会一直处于pending状态，调用方无法感知操作结束

最佳实现方式 #

优化后的代码如下，兼顾了结果传递和边界场景处理：

const func = (newPermissions) => {
  return new Promise((resolve, reject) => {
    this.setState({
      permissions: { ...newPermissions }
    }, () => {
      if (this.state.permissions.read) {
        // 直接resolve API请求的Promise，结果会自动向下传递
        resolve(api.getInfo());
      } else {
        // 处理无读取权限的情况，可根据业务需求选择resolve默认值或reject错误
        resolve(null);
        // 若需要抛出错误，可替换为：
        // reject(new Error('当前无读取权限'));
      }
    });
  });
}

使用方式 #

外部调用时可通过async/await或.then()获取结果：

// 方式1：async/await
async function callFunc() {
  try {
    const result = await func({ read: true });
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

// 方式2：.then()
func({ read: true })
  .then(result => console.log(result))
  .catch(err => console.error(err));

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