需要先前調用響應的多個AJAX API調用的最佳實踐？

Question

我正在開發一個內部頁面，允許用戶上傳包含資源和日期的CSV，並讓頁面將這些資源的所有計划信息添加到我們的管理軟件中。 有一個相當不錯的API來做這個，我有一個工作模型，但它似乎... cludgy。

對於每個資源，我必須開始一個新會話，然后創建一個新的預訂，然后添加資源，然后確認預訂沒有被阻止，然后提交預訂。 大多數調用都會返回我在下一步中需要的變量，因此每個調用都依賴於之前的ajax調用。

目前我通過嵌套的ajax調用這樣做：

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

雖然這是有效的，但我覺得必須有一種更簡單，或更“適當”的方式來做到這一點，無論是為了更清晰的代碼還是為了適應性。

Answer 1

假設您無法更改正在與之通信的API，那么您所做的是正確的。

如果您需要前一個響應數據用於下一個響應數據，那么實際上無法繞過必須進行某種嵌套的ajax調用。 然而.then承諾（ .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));