如何发出两个Get请求，第二个只能在第一个返回后发出？

Question

我正在使用tvmaze 的API 制作系列列表。

在主屏幕上，我需要列出该系列的名称和图像，以及该系列包含的剧集列表。

为此，我需要发出两个GET请求，第一个请求带来所有系列，第二个带来该系列包含的剧集。

你能告诉我在第一个 GET 完成后如何做第二个 GET 吗？

我正在 ReactJS 和 Redux 中开发应用程序。 我把我的项目放入代码沙箱

我的行动：

 import axios from "axios"; const BASE_URL = "https://api.tvmaze.com"; export const getMoviesList = () => async (dispatch) => { try { dispatch({ type: "MOVIES_LIST_LOADING", }); const response = await axios.get(`${BASE_URL}/shows`); dispatch({ type: "MOVIES_LIST_SUCCESS", payload: response, }); } catch (e) { dispatch({ type: "MOVIES_LIST_FAIL", }); } }; export const getEpisodesList = (id) => async (dispatch) => { try { dispatch({ type: "EPISODES_LIST_LOADING", }); const response = await axios.get(`${BASE_URL}/shows/${id}/episodes`); dispatch({ type: "EPISODES_LIST_SUCCESS", payload: response.data, }); } catch (e) { dispatch({ type: "EPISODES_LIST_FAIL", }); } };

我的 GET

问题是执行第二个 GET (getEpisodesList)， if我实现了它，它就无法使用。

 import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { getMoviesList, getEpisodesList } from "./store/actions/moviesAction"; import Routes from "./views/Routes"; const App = () => { const dispatch = useDispatch(); const movieState = useSelector((state) => state.moviesListReducer); React.useEffect(() => { dispatch(getMoviesList()); if (movieState.data.data) { movieState.data.data.map((ep) => dispatch(getEpisodesList(ep.id))); } }, [dispatch]); return ( <> <Routes /> </> ); }; export default App;

预先感谢您的任何帮助。

Answer 1

这是您想要做的事情背后的逻辑

const App = () => {
  const dispatch = useDispatch();
  const movieState = useSelector((state) => state.moviesListReducer);

  React.useEffect(() => {
    // if movieState is idle or not loading
    if (condition) {
      dispatch(getMoviesList());
    }
  // Update the dependencies to include the idle/loading state
  }, [dispatch]);
  React.useEffect(() => {
    // if movieState is fulfilled
    if (condition) {
      movieState.data.data.forEach((ep) => {
        dispatch(getEpisodesList(ep.id));
      });
    }
  // Update the dependencies here to include the fulfilled state
  }, [dispatch]);

  return (
    <>
      <Routes />
    </>
  );
};

这是您尝试做的事情的基本逻辑。 没有描述您的减速器代码，这就是我包含评论的原因。

但是这种方法可能不是最佳的，因为您最终可能会根据电影/节目的数量提出过多的请求。