前の呼び出しからの応答を必要とする複数のAJAX API呼び出しのベストプラクティス？

Question

私は、ユーザーがリソースと日付を含むCSVをアップロードし、これらのリソースのすべてのスケジュール情報を管理ソフトウェアに追加できるようにする内部ページを作成しています。これを行うための非常にまともなAPIがありますが、私は実用的なモデルを持っていますが、それは...クルージングのようです。

リソースごとに新しいセッションを開始し、新しい予約を作成してからリソースを追加し、予約がブロックされていないことを確認して予約を送信してください。ほとんどの呼び出しは、プロセスの次のステップに必要な変数を返すので、それぞれ前のAjax呼び出しに依存します。現在、私は、ネストされたAJAX経由でこれをやっている

は次のように呼び出します：

$.ajax('startnewsession').then($.ajax('createreservation').then('etcetc')) 

これは動作しますが、それを行うには簡単に、またはそれ以上の「正しい」方法がなければならないように、私は両方とも、感じますより洗練されたコードと適合性のために。

Answer 1

通信しているAPIを変更できないとすれば、正しいことです。

次の応答データの応答データが必要な場合は、ネストされたajax呼び出しを実行する必要はありません。しかし、約束（.then）は、コールバックを行う必要がありません。

適切な解決策（可能であれば）はもちろん、クライアントからサーバーへのラウンドトリップが少なくなるようにAPIを実装することです。予約を作成するためのネゴシエーションプロセスでは、これらの各ステップの間にユーザー入力がないことを考慮すると、ユーザーからの入力が増えるまでクライアントに連絡する必要はなく、APIは予約を作成するためのフロー全体を完了できる必要があります。

失敗した場合のために、各ajax呼び出し間でいくつかのエラー処理を行うことを忘れないでください。前回失敗した要求からの破損したデータで次のようなAPI呼び出しを作成したくない。

var baseApiUrl = 'https://jsonplaceholder.typicode.com'; 
$.ajax(baseApiUrl + '/posts/1') 
    .then(function(post) { 
    $.ajax(baseApiUrl + '/users/' + post.userId) 
     .then(function(user) { 
     console.log('got name: ' + user.name); 
     }, function(error) { 
     console.log('error when calling /users/', error) 
     }); 
    }, function(error) { 
    console.log('error when calling /posts/', error) 
    }); 

Answer 2

短い答え：いつものように私はこのようないくつかのチェーンをやろうとしている：

ajaxCall1.then(
    response => ajaxCall2(response) 
).then(
    response => ajaxCall3(response) 
) 

私はwhenの使用を回避しようとしています。いつものように私は1つのAjax呼び出し（フォーム提出のため）を持っています。時には、2つのチェーンのAjax呼び出しを持っています。たとえば、テーブルのデータを取得する必要がある場合、合計行数の最初のクエリ、 0、別のデータ呼び出し。

function getGridData() { 
     var count; 
     callForRowsCount().then(
     (response) => { 
      count = response; 
      if(count > 0) { 
       return callForData(); 
      } else { 
       return []; 
      } 
     } 
    ).then(response => { 
     pub.fireEvent({ 
      type: 'grid-data', 
      count: count, 
      data: response 
     }) 
     }) 
} 

pub lisher・トリガ・イベントを、と私はすべてのコンポーネントが更新されています：この場合、私が使用しています。

本当にまれなケースでは、whenを使用する必要があります。しかし、これは常に悪いデザインです。場合によっては、メインリクエストの前に追加データのパックをロードする必要があるときや、バックエンドがバルクアップデートをサポートしていないときに発生し、多くのデータベースエンティティを更新するajaxコールのパックを送る必要があります。このようなもの：

var whenArray = []; 
if(require1) { 
    whenArray.push(ajaxCall1); 
} 
if(require2) { 
    whenArray.push(ajaxCall2); 
} 
if(require3) { 
    whenArray.push(ajaxCall3); 
} 
$.when.apply($, whenArray).then(() => loadMyData(arguments));