javascript - Angular JS Promise + 对象构造函数

Question

这是我的情况。为简单起见，我们假设我有一个名为 BookListManager 的系统，用于管理图书馆图书列表。

app.service('BookListManager', function(){
    var BookListManager = {
        activeBookList:null,
        addNewBookList:function(){
            //create new BookList()
            //set new BookList to activeBookList;
        }
    }
}

然后我有一个工厂来创建 BookList 对象。

app.factory('BookList', function(){
    var BookList = function(params){
         //RESTful request via resource to fetch booklist data.
         //Assign booklist data to this object.
         //Create Book object for each book in this book list.
    }
    return BookList;
});

现在我有一个属于每个图书列表的 Book 对象。

 app.factory('Book', function(){
     var Book = function(){
        //RESTful resource call for book data.
        //Assign book data to Book object.
     }

     return Book;
 });

如何创建一个 promise 链，等到 BookList 和 Books 都完成从 AJAX 请求收集数据之后，再将其分配为 BookListManager 服务中的 activeBookList？

我正在使用最新版本的 Angular。谢谢。

Answer 1

嗯，在我看来，构造函数不应该执行任何 I/O，因为我认为这应该很简单。但是，考虑到您不同的编码风格，使用您当前的模式，我们别无选择，只能做出 Book 和 BookList 的 promise :

 app.factory('Book', function(){
     var Book = function(){
         var data = $http.get(...); // or ngResource call
         data.then(function(resp){
            // populate book fields, for example
            this.author = resp.data.author;
         }.bind(this))
         this.then = data.then; // make the book a thenable
     };

     return Book;
 });

这可以让你编写如下代码:

var b = new Book();
b.then(function(){
   // I know the book is loaded here
})

同样，您可以对 BookList 执行此操作:

app.factory('BookList', function(){
    var BookList = function(params){
         var p = $http.get(...); // fetch book list data, could be ngResource too
         var p2 = p.then(function(list){
             this.listName = list.data.name;
             var booksP = $q.all(list.data.books.map(function(bookId){
                 return new Book(bookId); // fetch param
             });
             return booksP; // return promise over books loading 
         }.bind(this))
         this.then = p2.then; // make this a promise that resolves on load
    };
    return BookList;
});

这会让你这样做:

var bl = new BookList(...);
bl.then(function(){
    // all data in the book list loaded
})