javascript - 在 Angular 路由解析中使用多个 Promise 修改项目数组

Question

在路由解析中，我需要进行 API 调用并返回一组书籍，如下所示:

{
    id: 1,
    name: 'Book name',
    authorId: 123
}

然后，我需要为 books 数组中的每本书进行另一个 API 调用，以返回作者姓名并将其添加到 book 对象中。

{
    id: 1,
    name: 'Book name',
    authorId: 123,
    authorName: 'Author Name'
}

到目前为止，我有以下内容，但它不起作用，因为作者 promise 只有在书籍归还后才得到解决。如何正确拆分这些 promise 并按预期修改图书对象？

resolve : {
    books: function ($stateParams, booksService, authorsService) {
        var books = [];
        var categoryId = $stateParams.categoryId;
        booksService.getBooksByCategory(categoryId)
            .then(function (response) {
                books = response.data;

                angular.forEach(books, function (book) {
                    var authorId = book.authorId;
                    authorsService.getAuthor(authorId)
                    .then(function (response) {
                        book.authorName = response.data.Name;
                    });
                });

                return books;
            });
    }  
}

Answer 1

基本上，您的代码中有两个错误:

• 工厂函数不返回任何值，您应该返回由 booksService 生成的 Promise。
• 在第一个 then 调用的回调中，您将在任何异步调用完成之前返回数组，因此它将为空。为了解决这个问题，你可以使用 $q.all() ，这是一个接受 Promise 数组作为参数的函数，并创建一个新的 Promise，只有当数组中的所有 Promise 都得到解析时才会解析。 .

编辑后的代码

resolve : {
    books: function ($q, $stateParams, booksService, authorsService) {
        var books = [];
        var categoryId = $stateParams.categoryId;
        return booksService.getBooksByCategory(categoryId)
            .then(function (response) {
                books = response.data;
                var promises = [];

                angular.forEach(books, function (book) {
                    var authorId = book.authorId;
                    var promise = authorsService.getAuthor(authorId)
                    .then(function (response) {
                        book.authorName = response.data.Name;
                    });
                    promises.push(promise);
                });

                return $q.all(promises).then(
                    function (res) {
                        return $q.resolve(books);
                    }
                );
            });
    }  
}