React中FetchStockPrice函数无法正确返回股票价格数据问题

问题根源在于fetch是异步操作：你的代码里stockPrice函数没有返回任何值，同步执行时thePrice = stockPrice()会直接拿到undefined——因为fetch的回调要等网络请求完成后才会执行，这时候外层函数已经提前返回了。另外你写的API_CALL用了单引号，里面的${API_KEY}不会被解析成实际密钥，得改成反引号。

下面是两种修复方案：

方式一：基于Promise链修改 #

export function FetchStockPrice(ticker) {
  function stockPrice() {
    const API_KEY = '###';
    const StockSymbol = ticker;
    // 改用反引号解析模板变量
    const API_CALL = `https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${StockSymbol}&interval=5min&apikey=${API_KEY}`;

    // 返回fetch的Promise链，让stockPrice成为一个Promise函数
    return fetch(API_CALL)
      .then(response => response.json())
      .then(data => {
        const latestPrice = parseFloat(data["Time Series (5min)"][Object.keys(data['Time Series (5min)'])[0]]["4. close"]);
        console.log(latestPrice);
        return latestPrice; // 此处return会让Promise最终resolve为该价格
      })
      .catch(e => {
        console.error(e);
        throw e; // 抛出错误让外部可以捕获处理
      });
  }

  // 返回stockPrice的Promise实例
  return stockPrice();
}

方式二：用async/await简化（更易读） #

export async function FetchStockPrice(ticker) {
  const API_KEY = '###';
  const StockSymbol = ticker;
  const API_CALL = `https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${StockSymbol}&interval=5min&apikey=${API_KEY}`;

  try {
    const response = await fetch(API_CALL);
    const data = await response.json();
    const latestPrice = parseFloat(data["Time Series (5min)"][Object.keys(data['Time Series (5min)'])[0]]["4. close"]);
    console.log(latestPrice);
    return latestPrice;
  } catch (e) {
    console.error(e);
    throw e;
  }
}

外部调用方式 #

无论用哪种方案，外部调用时都需要通过await或.then获取异步返回的价格：

// 用.then调用
FetchStockPrice('AAPL').then(price => {
  console.log('获取到的价格：', price);
  // 在此处保存价格数据
}).catch(err => {
  // 处理请求错误
});

// 在async函数里用await调用
async function saveStockPrice() {
  try {
    const price = await FetchStockPrice('AAPL');
    console.log('获取到的价格：', price);
    // 在此处保存价格数据
  } catch (err) {
    // 处理请求错误
  }
}
saveStockPrice();

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