调用集成Axios的async函数fetchPrice返回Promise而非价格如何解决

• 所有用async关键字声明的函数，返回值默认都是Promise对象，你未做异步等待处理直接调用fetchPrice()赋值，拿到的自然不是接口返回的实际价格数值。
• 原有fetchPrice还存在隐藏问题：没有将axios请求的结果作为函数返回值向外传递，就算后续做了异步等待处理，也只能拿到undefined。

1. 修正fetchPrice函数 #

将axios请求的结果返回，同时用try catch优化异步错误捕获逻辑：

async function fetchPrice() {
  try {
    const response = await axios.get(assetData(selectedAsset));
    // 向外返回实际价格数值
    return response.data.market_data.current_price.eur;
  } catch (error) {
    // 用可选链避免返回结构异常时抛出新错误
    console.log(error.response?.data?.error || error);
    // 错误场景返回兜底值，避免后续计算出现NaN
    return 0;
  }
}

2. 修正useEffect内的异步调用逻辑 #

useEffect不支持直接传入async回调函数，可在内部声明异步函数自执行，或者用then链式调用获取异步结果：

写法1：内部异步函数自执行（更推荐） #

useEffect(() => {
  const calcAssetAmount = async () => {
    // 等待异步请求拿到实际价格
    const price = await fetchPrice();
    console.log("Asset Price: ", price);

    // 价格异常时跳过计算
    if (price <= 0) return;
    const assetTotal = Number(cost) / Number(price);
    setAssetAmount(assetTotal);
  }

  calcAssetAmount();
// 依赖数组补充用到的外部变量cost，避免闭包问题
}, [selectedAsset, cost]);

写法2：then链式调用 #

useEffect(() => {
  fetchPrice().then(price => {
    console.log("Asset Price: ", price);
    if (price <= 0) return;
    const assetTotal = Number(cost) / Number(price);
    setAssetAmount(assetTotal);
  })
}, [selectedAsset, cost]);

• 禁止直接给useEffect的回调函数添加async标记，会触发React警告，还可能导致清理函数执行异常。
• 计算资产总额前增加有效值判断，避免接口返回异常时得到NaN结果。
• useEffect依赖数组必须包含所有用到的外部变量，否则会出现闭包问题获取到旧值。

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