1. ホーム
  2. angularjs

[解決済み] AngularJS - 複数のリソースクエリが完了するのを待つ

2022-10-26 02:03:34

質問

ngResourceで定義したファクトリーを1つ持っています。

App.factory('Account', function($resource) {
    return $resource('url', {}, {
        query: { method: 'GET' }
    });
});

このファクトリーで定義されたクエリメソッドを複数回呼び出すことになります。呼び出しは非同期に行うことができますが、続ける前に両方の呼び出しが完了するのを待つ必要があります。

App.controller('AccountsCtrl', function ($scope, Account) {
    $scope.loadAccounts = function () {
        var billingAccounts = Account.query({ type: 'billing' });
        var shippingAccounts = Account.query({ type: 'shipping' });

        // wait for both calls to complete before returning
    };
});

jQueryの$.when().then()機能のように、ngResourceで定義したAngularJSのファクトリーでこれを行う方法はありますか?私は現在のプロジェクトにjQueryを追加しないことを希望しています。

どのように解決するのですか?

プロミスを使い $q.all() .

基本的に、$resourceや$httpの呼び出しはプロミスを返すので、これを使用してすべての呼び出しをラップすることができます。

function doQuery(type) {
   var d = $q.defer();
   var result = Account.query({ type: type }, function() {
        d.resolve(result);
   });
   return d.promise;
}

$q.all([
   doQuery('billing'),
   doQuery('shipping')
]).then(function(data) {
   var billingAccounts = data[0];
   var shippingAccounts = data[1];

   //TODO: something...
});