页面加载后我的第一个 api 请求总是失败

Posted 2023-02-22

【中文标题】页面加载后我的第一个 api 请求总是失败

【英文标题】：My first api request always fails after page load

【发布时间】：2021-05-20 12:37:30

【问题描述】：

我的 API 请求出现问题，在页面加载后总是失败。真的不知道我哪里错了。

这是我的请求，我在与 handleOpen 函数交互时调用它。

  const stock = 
    method: 'GET',
    url: 'https://morningstar1.p.rapidapi.com/live-stocks/GetRawRealtimeFigures',
    params: Mic: props.mic, Ticker: clickedElement.ticker,
    headers: 
      'x-rapidapi-key': 'XXX',
      'x-rapidapi-host': 'morningstar1.p.rapidapi.com'
    
  

  const getStock = async () => 
    try 
      const res = await axios.request(stock);
        return res.data;
    
    catch (error) 
      setOpen(false);
      console.error("catch api error: ", error);
    
  

  const handleOpen = name => 
    
    let findClickedStock = props.stocksArray.find(item => item.ticker === name)
    setClickedElement(findClickedStock)

    getStock().then((dataFromStockApi) => 
      let combined1 =  ...dataFromStockApi, ...findClickedStock 
      setStockObject(combined1);

    );
    setOpen(true);
  ;

错误：

【问题讨论】：

404 表示没有这个url。确保您的网址正确。您可以使用一些软件来寻求帮助（例如邮递员）。它使请求检查更快。另外，请注意显示的错误消息。可能与SearchBar.js line 100 有什么关系

它与 react 或 axios 无关...您的 api-endpoint 有问题...首先在 postman 中测试您的端点

【参考方案1】：

这是因为你的 Ticker 参数是空的。

当您创建“库存”时，clickedElement.ticker 未定义。

这样做：

    // pass name in as a parameter
    getStock(name).then(...)

让 getStock 像这样：

  const getStock = async (ticker) => 
    try 
      const res = await axios.request(
         method: 'GET',
         url: 'https://morningstar1.p.rapidapi.com/live-stocks/GetRawRealtimeFigures',
         params: Mic: props.mic, Ticker: ticker,
         headers: 
           'x-rapidapi-key': 'XXX',
           'x-rapidapi-host': 'morningstar1.p.rapidapi.com'
         
      );

      return res.data;
    
    catch (error) 
      setOpen(false);
      console.error("catch api error: ", error);