AngularJSのコールバック(Promise)について書いてみた。

サーバー側と通信する上で必須なコールバック処理方法を書いてみました。
環境はAngular1.5とjavascriptです。

基本の形

コールバック処理で重要なのは非同期処理を操作できるオブジェクトPromiseです。
以下のコードはコントローラーからDI化したpromiseServise.jsのpromiseFunctionを呼び出して
色々処理してくれるのをsingularPromiseControllerは待ってる。という処理です。

待っている部分は～promiseFunction.then( 部分の.thenで待っているよ～という合図になります。

singularPromiseController.js

angular.module('myApp')
  .controller('SingularPromiseController', SingularPromiseController);
SingularPromiseController.$inject = ['PromiseServise'];

function SingularPromiseController(PromiseServise) {

  function singularPromiseFunction() {
    PromiseServise.promiseFunction.then( //ここでpromiseFunctionの結果を待つ
      function(data) { //resolveなどの引数に入っているオブジェクトがdataに入っている
        console.log('結果', data); 
    });
  }

}

そしてpromiseServise.jsではresolve・rejectでsingularPromiseControllerに処理の終了を通知しています。

promiseServise.js

angular.module('myApp')
  .servise('PromiseServise', PromiseServise);
PromiseServise.$inject = [];

function PromiseServise() {
  var servise = {
    promiseFunction: promiseFunction
  };
  return servise;

  var truthvalue = true;

  function promiseFunction() {
    return new Promise(function(resolve, reject) {
      if (truthValue) {
        var data = "成功";
        resolve(data); //singularPromiseFunctionに成功の結果を通知する
      } else {
        var err = "失敗" //singularPromiseFunctionに失敗の結果を通知する
        reject(err);
      }
    });
  }

}

応用編（複数待つ場合）

Promiseは複数のコールバック処理を待つ事ができます。
先程のpromiseServise.jsは一切変えずにpluralPromiseController.jsからpromiseServise.jsのpromiseFunctionを複数回呼び出してみます。

重要なのは$qで、$q.all(配列)とするとpromiseFunctionを全て呼び終わるまで待ってくれます。

pluralPromiseController.js

angular.module('myApp')
  .controller('PluralPromiseController', PluralPromiseController);
PluralPromiseController.$inject = ['$promise', '$q', 'PromiseServise'];

function PluralPromiseController($promise, $q, PromiseServise) {

  var array = [1,2,3];

  function pluralPromiseFunction(){
    var promiseList = [];

    angular.forEach(array, function(value, key) {
        promiseList.push(PromiseServise.promiseFunction().$promise); //一回のpromiseFunctionの結果をプッシュ
    });

    $q.all(promiseAll).then(function(responseArray) {　//全部呼ぶまで待機
        console.log("結果1", responseArray[0]); 
    });
  }

}

注意

resolveやrejectに複数のオブジェクトを渡したい時、

resolve(hoge, huga)

と書きたくなるのですが、resolveなどは第一引数しか結果を入れられません。
ですので、複数のオブジェクトを渡したい時は配列にオブジェクトをpushして配列をresolveの引数に入れましょう。

resultList.push(hoge, huga);
resolve(resultList)