什么时候应该使用 axios 进行异步调用，什么时候只使用 useEffect？答案

【问题标题】：When should I use axios for async calls and when only useEffect?什么时候应该使用 axios 进行异步调用，什么时候只使用 useEffect？
【发布时间】：2020-12-03 07:15:42
【问题描述】：

我现在很困惑。学习 js 前端以及如何发出 API 请求。到目前为止，每当我进行 API 调用时，我总是使用一些东西来处理异步请求（axios 或 thunk）。

但现在我遇到了一个案例，我正在向我的 Firebase/Firestore 发出请求，并且在我观看的 yt 视频中，只使用了 useEffect。没有任何async/await，比如：

useEffect(() => {
  // snapshot - to check, if there is a change (like a new entry) in the database
  db.collection('products').onSnapshot((snapshot) => {
    setProducts(snapshot.docs.map((doc) => doc.data()));
  });
}, []);

这是为什么？

【问题讨论】：

标签： javascript reactjs axios react-hooks

【解决方案1】：

在示例代码sn-p中

useEffect(() => {
  // snapshot - to check, if there is a change (like a new entry) in the database
  db.collection("products").onSnapshot(snapshot => {
      setProducts(snapshot.docs.map(doc => doc.data()))
  })
}, []);

db.collection("products") 管理自己的异步事件处理。当收到“快照”事件时，它会调用onSnapshot 回调并更新状态。没有什么可以等待的，尤其是没有返回值。

您还应该注意，useEffect 挂钩回调是 100%同步代码，它们不能标记为 async 和await 任何代码调用。但是，他们可以调用 async 函数来执行自己的等待等。

关于标题中的问题

使用useEffect 钩子任何时候您想从组件生命周期中发出任何副作用，例如控制台记录状态、获取数据、调度操作。这主要是因为功能性反应组件的整个功能体被视为纯函数。具有依赖关系的useEffect 更类似于基于类的组件的componentDidMount、componentDidUpdate 和componentWillUnmount 生命周期方法。单独调用它们只是作为反应组件生命周期的一部分。

当您需要获取该数据时，请使用axios、或fetch或任何其他数据获取代码。

【讨论】：

非常感谢您的回答。我明白了，我首先应该阅读有关 onSnaphsot 的文档。并且还用于澄清使用异步函数的 useEffect 。所以在这种情况下，这意味着已经使用了一个名为 onSnapshot 的异步函数。太好了。
@AaronErdwyn 我想我也应该更清楚一点，如果还没有，异步处理/调用函数并不一定意味着代码/函数是async。这里async 是一个关键字，它允许函数解析await 值（想想Promise 链）。

【解决方案2】：

useEffect() - 它是一个钩子，允许我们在网络请求等功能组件中执行副作用。
Axios - 它只是一个库，我们可以在其中发出 http 请求，例如 javascript 中的 fetch API，而且 axios 也是基于 Promise 的。

【讨论】：