AngularJS 的强制顺序请求

Question

我正在努力理解如何使用 AngularJS 1.5.7 执行强制顺序请求。

现在我正在重构一些代码，将新用户插入到用户列表中的特定位置，以处理多个用户的插入。

我已尝试缩短代码，以便更清楚地说明问题出在哪里。

原逻辑是这样的：

代码向我的 API 服务器发送请求，处理正确的插入，然后在前端刷新列表：

var users = [
    {id: "1", name: "Jack", order: "0"},
    {id: "2", name: "Jill", order: "1"},
    {id: "3", name: "john", order: "2"}
];

var person = {id: "4", name: "Erik", order: "0"};

UserProvider.update(person.id, {
    order: person.order
}).then(function () {
    return refreshUserList();
});

新用户列表如下所示：

{id: "4", name: "Erik", order: "0"}
{id: "1", name: "Jack", order: "1"}
{id: "2", name: "Jill", order: "2"}
{id: "3", name: "john", order: "3"}

这是我想要实现的目标：

现在我尝试按如下顺序插入多个用户：

// The list of persons are dynamic depending on the webmasters actins in the front-end
var persons = [
    {id: "4", name: "Erik", order: "0"},
    {id: "5", name: "Ellen", order: "1"},
    {id: "6", name: "Esther", order: "2"}
];

_.forEach(persons, function (person, index) {
    UserProvider.update(person.id, {
        order: person.order
    }).then(function () {
        return refreshUserList();
    });
});

这是我期望发生的事情：

{id: "4", name: "Erik", order: "0"}
{id: "5", name: "Ellen", order: "1"}
{id: "6", name: "Esther", order: "2"}
{id: "1", name: "Jack", order: "3"}
{id: "2", name: "Jill", order: "4"}
{id: "3", name: "john", order: "5"}

但是由于每个 UserProvider 请求都是异步的，所以我不能保证每个请求都会按照我想要的顺序完成，所以 API 可以一次插入每个用户。我该如何解决？

Answer 1

要按顺序执行承诺，从上一个承诺链接：

var persons = [
    {id: "4", name: "Erik", order: "0"},
    {id: "5", name: "Ellen", order: "1"},
    {id: "6", name: "Esther", order: "2"}
];

function sequentialPromise (persons) {
    var promise = $q.when();

    persons.forEach(function (person) {
        promise = promise.then(function() {
            return UserProvider.update(person.id, {
                order: person.order
            });
        });
    });

    return promise;
}

该代码创建一个初始的空承诺，然后从该初始承诺按顺序链接。

对于 AngularJS 框架，使用 $q Service 承诺很重要，因为它们与 AngularJS 执行上下文集成。 AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等

避免使用 ES6 承诺和 async/await，因为它们未与 AngularJS 执行上下文集成。

AngularJS 的强制顺序请求

Forced sequential requests with AngularJS

angularjs

angular-promise