在 MERN 应用程序（React 客户端）中外包 API 调用的正确方法？

Posted 2023-03-30

【中文标题】在 MERN 应用程序（React 客户端）中外包 API 调用的正确方法？

【英文标题】：Correct way to outsource API calls in a MERN app (React client)?

【发布时间】：2020-07-29 22:46:36

【问题描述】：

我正在尝试在 React/MERN 应用程序中外包一些 axios API 调用。我需要在客户端启动时（在 useEffect() 中）向服务器发出 GET 请求。我已将我的 axios 函数移动到 React 客户端文件夹中的外部文件并将其导出。使用 console.log 进行测试时，该函数本身似乎可以工作，因为它获得了正确的数据。但是，当我尝试在客户端的 useEffect() 钩子中使用该函数的返回值时，我得到 undefined 或 Promise（不能是 React 子级）。

这是我当前的代码：

App.js

const [response, setResponse] = useState('Loading...');

useEffect(() => 
  setResponse(helloMessage());
, [])

CallAPI.js

const helloMessage = () => 
    axios.get('http://localhost:5000/')
        .then(res => 
            return res.data.message;
        )
        .catch(() => 
            return 'Server not responding. Start the server and refresh this page.';
        )
    

导出和导入等正确到位。在这种情况下，我唯一的问题可能是 async/await 的语法或其他问题（我很确定这是这里的问题）。使用外部文件中的函数进行 API 调用以设置 useEffect() 状态的正确方法是什么？

【参考方案1】：

您应该拨打电话，并在回调中更改状态。

const [response, setResponse] = useState('Loading...');

useEffect(() => 
  helloMessage().then(res =>
   setResponse(res);
  )
, [])

并且需要从helloMessage返回承诺

const helloMessage = () => 
    return axios.get('http://localhost:5000/')
        .then(res => 
            return res.data.message;
        )
        .catch(() => 
            return 'Server not responding. Start the server and refresh this page.';
        )