在 React Redux 中嵌套 API 调用

Question

我很难弄清楚我的动作创建器中正在发生（和未发生）的事情。

我需要调用一个 API 端点，获取所有返回项目的 ID 和名称，然后为每个 ID 进行另一个调用。我想将最后一次调用的返回和第一次调用的 ids/names 存储在一个对象中并调度它。

{
  category: name //name of category
  subcategory: [] //array of categories in the category above. 
}

现在，我的 reducer 最终得到了我想要的东西，但是当我尝试在组件中记录那个特定的 prop 时，它是空的。 （下面我使用的是 OpenSocialAPI 或 osapi。这只是 ajax 请求的基本包装。允许我不必进行身份验证，因为它看到我已经通过身份验证。）

export function fetchCategories(id){
  let categories = []
  return function(dispatch){
    dispatch(requestCategories(id))
    return osapi.core.get({
      v: "v3",
      href: "/places/" + id + "/places"
    }).execute(function(response) {
      response.content.list.forEach(function(category) {
        osapi.core.get({
          v: "v3",
          href: "/places/" + category.id+ "/categories"
        }).execute(function(response) {
          categories.push({
            category: category.name,
            subcategories: response.content.list.map(category => category.name)
          })
        })
      })

    console.log("Category response: ", categories)
    dispatch(receiveCategories(id, categories))
    })
  }
}
export function receiveCategories(id,array){
  return {
    type: RECEIVE_CATEGORIES,
    id,
    categories: array,
    recievedAt: new Date(Date.now()),
    isFetching: false
  }
}

在我的应用程序中，我在 componentDidMount 中调度动作创建者

  componentDidMount() {
    const { dispatch } = this.props
    dispatch(fetchCategoriesIfNeeded(id))
  }

现在，当我控制台登录我的 Category 组件并在上面执行时，它是空的。但是在我的记录器中查看我的状态，当recieveCategories 完成时，我有我想要的对象数组

[{category:..., 
  subcategories:[...]
 },
 {category:..., 
  subcategories:[...]
 }]

我怀疑这是因为异步的原因，但我不确定如何继续。

我尝试为基于 Promise 的调用创建自己的包装器，但我遇到了类似的问题，可能更多是因为我不确定 resolve(response) 是否是我想要的。

function httpService(path){
   return new Promise(function(resolve, reject){
          osapi.core.get({
              v: 'v3',
              href: path
          }).execute(function(response, error){
              if(error){
                  return reject(new Error("Error: ", error))
              }
              resolve(response)
          })  
        })
}
export function fetchCategories(spaceId) {
  let categories = []
  return function(dispatch) {
    dispatch(requestCategories(id))
    return httpService("/places/" + id + "/places")
      .then(function(response) {
        response.content.list.forEach(function(category) {
          fetchSubCategories("/places/" + category.id + "/categories")
            .then(function(response) {
              categories.push({
                category: category.name,
                subcategories: response
              })
            })
        })
        console.log("CATEGORIES: ", categories)
        dispatch(receiveCategories(id, categories))
      })
  }
}
function fetchSubCategories(url){
  return httpService(url)
  .then(function(response){
    return response.content.list.map(category => category.name)
  })
}

你能看看这个并给予指导吗？另外，我调度一个基于 API 响应构建的数组是一种有效的做事方式，还是有更好的方法？谢谢

我只能找到 1 个具有类似用例的其他问题，但他们使用的是 bluebird 或类似的东西。我真的很想保留这个，除了 Redux 之外没有任何额外的东西。

Answer 1

看起来您只需要在您的.execute() 回调内部调度您的类别，而不是在它之外。您正在执行osapi.core.get().execute((response) =>，但随后在该execute 回调之外，您调度receiveCategories，它将在您的Promise 解决之前很久执行，并调度您初始化的空数组。

您还需要使用Promise.all 来获取所有嵌套GET 请求的响应。

也没有理由保留一个变异数组。

Answer 2

我猜osapi.core.get 是某种基于承诺的获取库？并且获取成功时调用.execute？

如果是这样，那么您缺少的是您没有等待所有异步调用完成。

我将展示一个基于通用 fetch 和原生 Promises 的解决方案，以便您了解该解决方案并根据您的特定库采用它。

const promises = [];
response.content.list.forEach(function(category) {
    const promise = fetch("/places/" + category.id+ "/categories");
    promises.push(promise);
})

Promise.all(promises).then(responses => {        
    categories = responses.map(response => ({/* do your object mapping here */}))
    // now you can dispatch with all received categories
    dispatch(receiveCategories(id, categories))
}); 

此外，您在嵌套函数中使用了相同的变量 - 虽然这可能有效并且计算机可以理解它，但任何人都很难确定哪个 response 属于哪个范围。因此，您可能还想再看看您的变量名称。