angular js结合了异步和同步代码

angular js combine asynchronous and synchronous code

本文关键字：同步 代码 异步 js 结合了 angular      更新时间：2023-09-26

我正在使用angular resource模块来处理我的restfull Web服务器。例如，我有一个方法，它返回一个由10个元素组成的数组，我想做的只是将结果保存到一个名为books的javascript变量(不在angular scope中(中。

所以我写了一个简单的方法，看起来像这样：

function getBooks(user_id) {
    var books = [];
    BookFactory.getBooks.query({ id: user_id }).$promise.then(function (result) {
        angular.forEach(result, function(i) {
            books.push(i);
        });
    });
    return books;
}

让我们假设BookFactory.getBooks.query按预期工作，并真正返回10个元素。因此，这个函数中有一个简单的逻辑，我只需将每个元素推送到数组books中。

此外，我还有一个测试getBooks()函数的测试函数。这是：

$scope.testGetBooksMethod = function (user_id) {
    var resut = getBooks(user_id);
    alert(resut.length);
};

警报中的结果将始终为0。我知道这部分代码：

BookFactory.getBooks.query({ id: user_id }).$promise.then(function (result) {
            angular.forEach(result, function(i) {
                books.push(i);
            });
        });

异步工作，直到服务器请求得到处理，函数getBooks()返回一个空的图书数组(如果我错了，请纠正我(。

这里有一个问题，我如何编辑我的函数，使其正确工作。我想从rest中获取数据，用这个数据填充数组books，然后返回它

提前谢谢。

我想从rest中获取数据，用这些数据填充数组簿，然后返回。

事情就是这样。异步编程实际上与同步编程并不兼容。所以你不能把它们组合在一起。然而，您可以以类似的同步方式工作，这就是promise非常强大的地方。您不返回data，而是返回有状态的Promise对象。

因此，与其返回books，不如为这本书返回Promise：

function getBooks(user_id) {
    return BookFactory.getBooks.query({ id: user_id }).$promise;
}

然后在使用代码时，您将使用这个具有底层状态控制机制的包装器对象，该机制将在书籍加载并可用时继续：

$scope.testGetBooksMethod = function (user_id) {
    getBooks(user_id).then(function(books) {
        alert(books.length);
    });
};

这里需要使用promise概念，控制器函数的testGetBooksMethod将等待服务方法的getBooks完成其调用。为此，您需要从getBooks函数返回BookFactory.getBooks.query promise。在数据得到检索后，书籍将被创建&将从CCD_ 12方法返回。在调用getBooks方法时，您需要使用.then函数来继续链承诺的事情，当从getBooks返回数据时，该函数将获得从您的服务返回的数据。

function getBooks(user_id) {
    var books = [];
    return BookFactory.getBooks.query({ id: user_id }).$promise.then(function (result) {
        angular.forEach(result, function(i) {
            books.push(i);
        });
        return books;
    });
}

控制器

$scope.testGetBooksMethod = function (user_id) {
    getBooks(user_id).then(function(resut){
        alert(resut.length);
    });
};
相关文章：