使用jQuery的功能承諾

Question

我正在嘗試從Phoenix Web應用程序下載一些數據，並在前端渲染數據。 為此，我在列表中有請求和回調，並在對每個請求then處理時針對它運行list.reduce。

var Database = function() {
  this.reservations = [];
  this.applications = [];
  this.environments = [];
};

var database = new Database();

var requests = [$.getJSON('/api/applications', data => { database.applications = data }),
                $.getJSON('/api/environments', data => { database.environments = data }),
                $.getJSON('/api/reservations', data => { database.reservations = data })];

function run() {
  requests.reduce(function(chain, callback) {
      return (chain ? chain.then(callback) : callback);
  }, null).then(() => render(database));
}

但是，大多數情況下，這在最新版本的Google Chrome瀏覽器中仍然有效，而在Safari中，可能只有10％的時間有效。

進入渲染功能后，當我檢查“數據庫”時，我看到的是應用程序列表，但看不到環境和預留（2條數據）。

編輯：好的，所以它可以在正常模式下的Google Chrome中工作。 但是在隱身模式下並不能一直工作。 在Safari中，有時會提取全部3個數據，有時只提取2個數據。 我的應用程序不使用任何會話。

我猜這是由$ .ajax的異步特性引起的，也許是我違背了諾言。 但是我遇到了障礙。

有什么見解嗎？

Answer 1

您不需要鏈接您的諾言，因為它們看起來彼此都不依賴，所以可以同時請求所有諾言。 取而代之的是，您可以使用.map()並獲取結果（將是諾言的列表），並使用.all()等待它們全部解決。

（我有一些自由，因此以下內容應視為偽代碼）

var urls = ['whatever.com', 'example.com/something', 'something.com/whatever'];

var requestPromises = urls.map(function(url) {
    return ajax(url); // assume ajax() returns a promise
});

Promise.all(requestPromises).then(function(results) {
    console.log(results);
});

Answer 2

感謝@Soviut的幫助。 對於結束：這是我為解決此問題所做的工作。

// ... is the ES6 spread operator
function run() { 
  $.when(...requests).then(() => {
    render(database);
  });
}