Recoil selectorFamily中try/catch捕获Promise的原因及状态判断疑问

一、catch捕获Promise的原因 #

Recoil的get方法在处理异步selector/selectorFamily时，若目标异步查询仍处于pending状态，会直接抛出这个pending的Promise。这是Recoil内置的加载机制——它通过抛出Promise触发React Suspense（若使用），或告知调用方数据尚未就绪，并非真正的异常错误。

你代码里try块中连续执行await get(xxxQuery)，当某个xxxQuery还在加载时，get会抛出其pending Promise并被catch捕获。此时这个Promise后续可能成功（fulfilled）或失败（rejected），并非实际报错，因此会出现“误判异常”的情况。

二、浏览器日志中Promise状态矛盾的原因 #

浏览器控制台采用惰性求值：当你执行console.log(error)时，Promise仍处于pending状态，控制台直接显示<pending>；但当你展开这个Promise对象查看详情时，控制台会重新读取它的当前状态——此时Promise已经完成（fulfilled），所以promiseState显示为'fulfilled'。

准确判断Promise状态的方法 #

不能依赖控制台的即时输出，需通过Promise回调或工具函数跟踪：

1. 用.then()/.catch()监听最终状态（你代码中已实现此逻辑）：

if (error instanceof Promise) {
  error
    .then(() => console.log('请求最终成功'))
    .catch(() => console.log('请求最终失败'));
}

2. 工具函数获取即时状态（注意：此为快照，后续状态变化需自行监听）：

function getPromiseState(promise) {
  let state = 'pending';
  promise
    .then(() => state = 'fulfilled')
    .catch(() => state = 'rejected');
  return state;
}

代码优化建议 #

若不想让Recoil抛出pending Promise，可使用loadable API替代直接get，它会返回包含状态的对象，不会抛出Promise：

const dataQueryForPage = selectorFamily({
  key: 'dataQueryForPage',
  get: (refreshKey) => async ({ get, loadable }) => {
    // 用loadable获取异步状态，避免抛出Promise
    const data1Loadable = loadable(data1Query);
    if (data1Loadable.state === 'hasValue') {
      const data1 = data1Loadable.contents;
      // 处理成功数据
    } else if (data1Loadable.state === 'hasError') {
      const error = data1Loadable.contents;
      // 处理真实错误
    }
    // 同理处理data2、data3...
  },
});

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