什么时候应该使用 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

1. useEffect() - 它是一个钩子，允许我们在功能组件（如网络请求等）中执行副作用。

2. Axios - 它只是一个库，我们可以在其中发出 http 请求，例如 JavaScript 中的 fetch API，而且 axios 是基于 Promise 的。