时间戳

首页 > 解决方案 > 什么时候应该使用 axios 进行异步调用，什么时候只使用 useEffect？

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

问题描述

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

为什么是这样？

标签： javascriptreactjsaxiosreact-hooks

解决方案

在示例代码片段中

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钩子，例如控制台日志记录状态、获取数据、调度操作。这主要是因为一个功能性反应组件的整个功能体都被认为是一个纯函数。with dependencies 更类似于基于类的组件的、和生命周期方法。单独它们只是被称为反应组件生命周期的一部分。useEffectcomponentDidMountcomponentDidUpdatecomponentWillUnmount

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

推荐阅读