Question

我在后端运行Rails，在前端运行React。我创建了一个使用fetch方法的函数，因此React可以与Rails对话 - 这个函数向Rails发送POST请求。

理想情况下，我想要以下内容：

(1. GET all scores from rails API) -> (2. save them as states) -> (3. From React, perform POST/ PUT/ DELETE to Rails) -> (4. GET all updated scores from rails API) -> (5. save them as states) -> (&c.)

理想情况下，我希望步骤(3)在(4)执行之前完全完成，这样如果我POST在React to Rails上获得新分数，则步骤4会获取并获得新分数，我的州将是最新的。

我的问题是，有时步骤(4)会在步骤(3)完成之前发生。我有时会说，因为有时它会在我创建/删除新分数时更新状态，有时在创建/删除新分数时不会更新状态。

目前我的功能如下：

handleDelete(){
  ...
  Client.deleteScores(maxWeek).then(this.getStudentsAndScores());
}

#deleteScores:
function deleteScores(week){
  return fetch(`delete_latest_week`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      week: week
    })
  });
}

#scores_controller (rails):
def delete_by_week
  Score.destroy_all(:week => params[:week])
  head :no_content
end

它显示方法POST时显示删除。长话短说，它是通过POST方法删除帖子。详情here。它的要点是，我有一个fetch POST方法需要在React做其他事情之前完成。

then函数getStudentsAndScores()是从Rails获取GET数据的函数。我希望它在获取数据之前等待Client.deleteScores()先完成，但似乎getStudentsAndScores在完成deleteScores()之前就已经运行了。简而言之，在我删除它之后，当它不起作用时，我必须刷新页面才能看到它已被删除。

在执行下一个函数之前，如何判断React是否等到第一个请求完成？

Answer 1

fetch调用返回一个promise。所以，在内部你不应该立即调用另一个函数，而是提供一个函数，当promise成功解析时应该调用它。试试这样的事情 -

handleDelete(){
  ...
  Client.deleteScores(maxWeek).then(this.getStudentsAndScores);
}

在React中运行下一个方法之前等待获取请求完成？

1 个答案: