React？で次のメソッドを実行する前に、フェッチ要求が完了するのを待ちます。

Question

私はバックエンド上でRailsを実行しており、フロントエンドでは反応しています。私はfetchメソッドを使ってReactがRailsと対話できるように関数を作成しました - この関数はPOST要求をRailsに送ります。 I POST Railsのように反応するの新しいスコアが、ステップ4フェッチならば、私は(3)が完全に(4)実行される前に終了するステップ、その方法をしたいと思い、理想的には

(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.) 

：

理想的には、私は次のことを希望します新しいスコアを取得し、私の状態は最新のものになります。

私の問題は、ステップ(4)がステップ(3)が終了する前に起こることがあるということです。私は新しいスコアを作成/削除したときに状態を更新することがあり、時にはでない場合があります。は新しいスコアを作成/削除したときの状態を更新します。それはそれは方法のPOSTを示しながら削除言う

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メソッドを使用して投稿を削除することです。詳細here。それの要点は、私はPOSTメソッドを取得してからReactが何か他のことをする前に終了する必要があるということです。

thenファンクションgetStudentsAndScores()は、RailsからGETデータをフェッチするファンクションです。データを取得する前にClient.deleteScores()が完了するのを待つようにしますが、で終了する前にgetStudentsAndScoresが実行されたようです。要するに、私はそれを削除した後、それが動作しない場合、私はをリフレッシュしてそれが削除されていることを確認する必要があります。

Reactに次の関数を実行する前に最初のリクエストで終了するまで待つようにするにはどうすればよいですか？

Answer 1

fetch呼び出しは約束を返します。だから、すぐに別の関数を呼び出すのではなく、約束がうまく解決されたときに呼び出される関数を提供するべきです。このようなことを試してみてください。 -

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