在運行React中的下一個方法之前等待提取請求完成？

我在後端運行Rails並在前端運行。我創建了一個利用fetch方法的函數，因此React可以與Rails對話 - 此函數向Rails發送POST請求。在運行React中的下一個方法之前等待提取請求完成？

理想情況下，我想以下幾點：

(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上反應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。它的要點是，我有一個取回POST的方法，需要在React做其他事情之前完成。

then函數，getStudentsAndScores()是從Rails中獲取GET數據的函數。我希望它在獲取數據之前先等待Client.deleteScores()完成，但似乎getStudentsAndScores在完成deleteScores()之前運行。總之，在我刪除它之後，當它不起作用時，我必須刷新頁面才能看到它已被刪除。

如何告訴React在執行下一個函數之前等待第一個請求完成？

來源

2017-07-21 Iggy

fetch調用返回一個承諾。因此，在那裏你不應該立即調用另一個函數，而是提供一個函數，當promise成功解析時應該調用它。試試這樣 -

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

來源

2017-07-21 17:50:57 Akhil

嗨@Akhil，謝謝你的迴應！我已經嘗試過了。我把它放在代碼的第二行，我把'Client.deleteScores（maxWeek）.then（this.getStudentsAndScores（））;' – Iggy

嗨，getStudentsAndScores函數後刪除括號。它應該只是Client.deleteScores（maxWeek）.then（this.getStudentsAndScores）; – Akhil

在運行React中的下一個方法之前等待提取請求完成？

回答

相關問題