React中如何访问Promise对象的PromiseState和PromiseResult

解决方案 #

Promise的内部属性[[PromiseState]]、[[PromiseResult]]属于JavaScript引擎私有属性，不支持直接访问，你可以通过以下标准方式获取结果、判断状态：

方式1：使用.then() + .catch() 链式调用 #

这是Promise原生支持的处理逻辑，请求成功的结果会传入.then()回调，请求错误会传入.catch()回调：

const fetchPromise = fetchCurrentWeatherID({
  params: {id: data.id - 3204, appid: 'ebc8de08ce3579cf444b51c12772a8bc'},
})

fetchPromise
  .then(result => {
    // 此时PromiseState为fulfilled，result就是PromiseResult的值
    console.log('请求成功结果：', result)
    // 可以将result存入React state供组件渲染使用
  })
  .catch(error => {
    // 此时PromiseState为rejected，error就是PromiseResult的值
    console.log('请求失败错误：', error)
  })

方式2：使用async/await语法（推荐，代码可读性更高） #

将请求逻辑封装在async函数中，配合try/catch捕获错误，React组件中通常搭配useEffect使用：

import { useState, useEffect } from 'react'

// 组件内逻辑示例
const [weatherData, setWeatherData] = useState(null)
const [fetchError, setFetchError] = useState(null)

useEffect(() => {
  const getWeatherData = async () => {
    try {
      const result = await fetchCurrentWeatherID({
        params: {id: data.id - 3204, appid: 'ebc8de08ce3579cf444b51c12772a8bc'},
      })
      // PromiseState为fulfilled，result即为返回的接口数据
      console.log('请求成功结果：', result)
      setWeatherData(result)
    } catch (error) {
      // PromiseState为rejected，error即为返回的错误信息
      console.log('请求失败错误：', error)
      setFetchError(error)
    }
  }

  getWeatherData()
}, [data.id]) // 依赖项可根据实际业务调整

调试场景临时获取内部属性方法（禁止在生产代码中使用） #

如果仅在浏览器控制台调试需要查看状态，可以用以下hack方案，不要写入生产代码：

async function getPromiseDebugInfo(promise) {
  const state = await Promise.race([
    promise.then(() => 'fulfilled', () => 'rejected'),
    Promise.resolve().then(() => 'pending')
  ])
  const result = state === 'pending' ? undefined : await promise.catch(e => e)
  return { state, result }
}

// 调用示例
getPromiseDebugInfo(fetchPromise).then(info => {
  console.log('Promise状态：', info.state)
  console.log('Promise结果：', info.result)
})

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