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

Question

我现在很困惑。学习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()));

  });

}, []);

为什么是这样？

Answer 1

在示例代码片段中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挂钩，例如控制台日志记录状态、获取数据、调度操作。这主要是因为函数式 React 组件的整个函数体都被视为纯函数。with dependency 更类似于基于类的组件的、和生命周期方法。它们只是作为 React 组件生命周期的一部分被单独调用。useEffectcomponentDidMountcomponentDidUpdatecomponentWillUnmount每当您需要获取数据时，请使用 、 或 或任何其他数据获取axios代码。fetch

Answer 2

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