使用 jQuery 的功能承诺

Question

我正在尝试从 Phoenix 网络应用程序下载一些数据并在前端呈现数据。为此，我在列表中有请求和回调，并且在 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% 的时间有效。

当我进入渲染函数后检查 "database" 时，我看到了应用程序列表，但没有看到环境和预订（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);
  });
}

使用 jQuery 的功能承诺

Functional promise using jQuery

javascript

ajax

jquery

promise

jquery-events