Question

对此我感到很困难，我似乎无法解决这个问题。

目前，我有两个API。一个是通过子域前缀获取的，然后是另一个需要子域前缀的api调用，该调用需要获取一些数据，这些数据将用于获取下一个api调用。在这种情况下，子域前缀的id获取了数据。这是一个示例：

当您加载https://<name>.mywebsite.com时，我们使用name前缀来获取第一个数据，这给了我有关子域的对象。在这种情况下，名称，ID，徽标等。

加载完成后，我需要在不同的api调用中获取一些数据，该调用需要一个子域ID。在这种情况下，/api/<subdomainId>/。

如您所见，它需要从第一个api提取数据，然后才能进行下一个api提取。

我目前正在使用React上下文：

  // Get subdomain and store it in a state subdomain: {}
  const getSubdomain = async () => {
    try {
      const res = await axios.get(`https://api.mywebsite.com/api/v1/subdomain`);
      dispatch({
        type: GET_SUBDOMAIN,
        payload: res.data
      });
    } catch (err) {
      console.log(err);
    }
  };

然后我的下一个方法是：

  // Get posts (from storedomain: { id: 1 }
  const getPosts = async() => {
      try {
        const res = await axios.get(
          `https://api.mywebsite.com/api/v1/public/${state.subdomain.id}/posts`
        );

        dispatch({
          type: GET_IDEAS,
          payload: res.data.rows
        });
      } catch (err) {
        console.log(err);
      }
  };

不幸的是，这给了我subdomain.id的空错误，因为它没有等到子域对象完成获取。我尝试过使用useEffect，但是我没有运气。我想知道是否有一种干净的方法可以做到这一点并使它动态化，而不是必须通过useEffect传递subdomain.id。一旦获取posts: {}对象，这些帖子就会被添加到该对象中。

如果我没有任何道理，我事先表示歉意。我会尽力澄清其他问题。

Answer 1

尝试将异步请求链接在一起。类似于：

const fetchData = async () => {
  const subdomain = await fetchSubdomain()
  dispatch(/* subdomain */)
  const posts = await fetchPosts(subdomain)
  dispatch(/* posts */)
}

请注意，fetchSubdomain和fetchPosts与您提供的代码示例略有不同。他们只是包裹axios.get(...)。

在第一个api调用返回数据后进行第二个api调用

1 个答案: