AngularJS
$ q 서비스로 인한 약속

여러 약속을 처리하기 위해 $ q.all 사용

$q.all 함수를 사용하여 약속 배열이 성공적으로 해결되고 해결 된 데이터를 가져온 후에 .then 메서드를 호출 할 수 있습니다.

예:

JS :

 $scope.data = []

 $q.all([
    $http.get("data.json"),
    $http.get("more-data.json"),
    ]).then(function(responses) {
      $scope.data = responses.map((resp) => resp.data);
    });

위의 코드가 실행 $http.get 둘 때, 지역 JSON 파일의 데이터를 2 배를 get 완벽한 방법을 그들이 관련 약속을 해결, 배열의 모든 약속이 해결되면, .then 방법은 내부에 모두 약속 데이터로 시작 responses 배열 인수.

그런 다음 데이터가 매핑되어 템플릿에 표시 될 수 있도록 표시 할 수 있습니다.

HTML :

<ul>
   <li ng-repeat="d in data">
      <ul>
         <li ng-repeat="item in d">{{item.name}}: {{item.occupation}}</li>
      </ul>
   </li>
</ul>

JSON :

[{
  "name": "alice",
  "occupation": "manager"
}, {
  "name": "bob",
  "occupation": "developer"
}]

$ q 생성자를 사용하여 약속 만들기

$q 생성자 함수는 콜백을 사용하여 결과를 반환하는 비동기 API로부터 약속을 생성하는 데 사용됩니다.

$ q (함수 (해결, 거부) {...})

생성자 함수는 약속을 해결하거나 거부하는 데 사용되는 함수 인 resolve 및 reject 라는 두 개의 인수로 호출되는 함수를받습니다.

예제 1 :

function $timeout(fn, delay) {
    return = $q(function(resolve, reject) {
         setTimeout(function() {
              try {
                 let r = fn();
                 resolve(r);
              } 
              catch (e) {
                 reject(e);
              }
         }, delay);
     };
}
    

위의 예제는 WindowTimers.setTimeout API 로부터 약속을 생성합니다. AngularJS 프레임 워크는이 함수의보다 정교한 버전을 제공합니다. 사용법은 AngularJS $ timeout Service API Reference를 참조하십시오 .

예 2 :

$scope.divide = function(a, b) {
    return $q(function(resolve, reject) {
      if (b===0) {
        return reject("Cannot devide by 0")
      } else {
        return resolve(a/b);
      }
    });
}

위의 코드는 약속 된 나눗셈 함수를 보여 주며, 계산이 불가능할 경우 결과와 함께 약속을 반환하거나 이유와 함께 거부합니다.

그런 다음 전화를 사용할 수 있습니다 .then

$scope.divide(7, 2).then(function(result) {
    // will return 3.5
}, function(err) {
    // will not run
})

$scope.divide(2, 0).then(function(result) {
    // will not run as the calculation will fail on a divide by 0
}, function(err) {
    // will return the error string.
})

$ q.defer를 사용하여 작업 연기

$q.defer 를 사용하여 현재 약속 된 객체가 보류되어있는 동안 $q 를 사용하여 향후 작업을 연기 할 수 있습니다. $q $q.defer 를 사용하여 향후 해결하거나 거부 할 약속을 만듭니다.

이 메소드는 $q 생성자를 사용하는 것과 동일하지 않습니다. $q.defer 를 사용하여 약속을 반환하거나 반환하지 않을 수도있는 기존 루틴을 약속하기 때문입니다.

예:

var runAnimation = function(animation, duration) {
    var deferred = $q.defer();
    try {
        ...
        // run some animation for a given duration
        deferred.resolve("done");
    } catch (err) {
        // in case of error we would want to run the error hander of .then
        deferred.reject(err);
    }
    return deferred.promise;
}

// and then
runAnimation.then(function(status) {}, function(error) {})

1. 항상 deferred.promise 객체를 반환하거나 .then 호출 할 때 오류가 .then

2. 당신이 항상 해결 또는 연기 된 개체를 거부하거나 확인 .then 실행되지 않을 수 있습니다 당신은 메모리 누수 위험

$ q 서비스에 각도 약속 사용하기

$q 는 비동기 함수를 실행하고 처리가 끝나면 반환 값 (또는 예외)을 사용하는 데 도움이되는 기본 제공 서비스입니다.

$q 는 $rootScope.Scope 모델 관찰 메커니즘과 통합되어 있습니다. 즉, 모델로의 해상도 또는 거부 전파 속도가 빨라지고 불필요한 브라우저 다시 칠이 발생하지 않아 UI가 깜박입니다.

이 예에서는 약속 객체를 반환하는 getMyData 팩토리를 호출합니다. 객체가 resolved 되면 난수가 반환됩니다. rejected 경우 2 초 후에 오류 메시지와 함께 거부됩니다.

각도 공장에서

function getMyData($timeout, $q) {
  return function() {
    // simulated async function
    var promise = $timeout(function() {
      if(Math.round(Math.random())) {
        return 'data received!'
      } else {
        return $q.reject('oh no an error! try again')
      }
    }, 2000);
    return promise;
  }
}

통화 중 약속 사용하기

angular.module('app', [])
.factory('getMyData', getMyData)
.run(function(getData) {
  var promise = getData()
    .then(function(string) {
      console.log(string)
    }, function(error) {
      console.error(error)
    })
    .finally(function() {
      console.log('Finished at:', new Date())
    })
})

약속을 사용하려면 $q 를 의존성으로 주입하십시오. 여기서 getMyData 팩토리에 $q 를 주입했습니다.

var defer = $q.defer();

deferred의 새로운 인스턴스는 $q.defer() 호출하여 생성됩니다.

지연 객체는 단순히 약속을 노출하는 객체 일뿐 아니라 약속을 해결하는 관련 메소드입니다. $q.deferred() 함수를 사용하여 생성되며 resolve() , reject() 및 notify() 세 가지 기본 메소드를 제공합니다.

• resolve(value) - 파생 된 약속을 값으로 결정합니다.
• reject(reason) - 이유와 함께 파생 된 약속을 거부합니다.
• notify(value) - 약속의 실행 상태에 대한 업데이트를 제공합니다. 이것은 약속이 해결되거나 거절되기 전에 여러 번 호출 될 수 있습니다.

속성

연관된 promise 객체는 promise 속성을 통해 액세스됩니다. promise - {약속} -이 지연과 관련된 객체를 약속합니다.

새로운 약속 인스턴스는 지연 인스턴스가 생성 될 때 만들어지며 deferred.promise 를 호출하여 검색 할 수 있습니다.

promise 객체의 목적은 이해 관계자가 완료 될 때 지연된 작업의 결과에 액세스 할 수있게하는 것입니다.

약속 방법 -

• then(successCallback, [errorCallback], [notifyCallback]) - 약속이 해결되거나 거부 될 때와 관계없이 결과를 사용할 수있게되는 즉시 비동기 적으로 성공 또는 오류 콜백 중 하나를 호출합니다. 콜백은 결과 또는 거절 이유와 같은 단일 인수로 호출됩니다. 또한 알림 콜백은 약속이 해결되거나 거부되기 전에 진행 표시를 제공하기 위해 0 번 이상 호출 될 수 있습니다.

• catch(errorCallback) - promise.then (null, errorCallback)에 대한 속기.

• finally(callback, notifyCallback) - 약속의 이행 또는 거부를 관찰 할 수 있지만 최종 값을 수정하지 않고이를 수행 할 수 있습니다.

약속의 가장 강력한 특징 중 하나는 함께 묶을 수있는 능력입니다. 이렇게하면 데이터가 체인을 통과하여 각 단계에서 조작되고 변형 될 수 있습니다. 이는 다음 예제를 통해 입증됩니다.

예제 1 :

// Creates a promise that when resolved, returns 4.
function getNumbers() {

  var promise = $timeout(function() {
    return 4;
  }, 1000);
  
  return promise;
}

// Resolve getNumbers() and chain subsequent then() calls to decrement
// initial number from 4 to 0 and then output a string.
getNumbers()
  .then(function(num) {
      // 4
      console.log(num);
      return --num;
  })
  .then(function (num) {
      // 3
      console.log(num);
      return --num;
  })
   .then(function (num) {
      // 2
      console.log(num);
      return --num;
  })
  .then(function (num) {
      // 1
      console.log(num);
      return --num;
  })
  .then(function (num) {
      // 0
      console.log(num);
      return 'And we are done!';
  })
  .then(function (text) {
      // "And we are done!"
      console.log(text);        
  });

$ q.when ()를 사용하여 간단한 값을 약속으로 마무리하십시오.

가치있는 것을 값으로 감싸는 것이 필요하다면 다음과 같이 긴 구문을 사용할 필요가 없습니다.

//OVERLY VERBOSE
var defer;
defer = $q.defer();
defer.resolve(['one', 'two']);
return defer.promise;

이 경우 다음과 같이 작성할 수 있습니다.

//BETTER
return $q.when(['one', 'two']);

$ q.when 및 별칭 $ q.resolve

값 또는 (제 3 자) 그때 약속 할 수있는 객체를 $ q 약속으로 래핑합니다. 이는 약속이 될 수도 있고 아닐 수도있는 객체를 다루거나 신뢰할 수없는 출처에서 오는 약속 일 경우 유용합니다.

- AngularJS $ q 서비스 API 참조 - $ q.when

AngularJS v1.4.1의 출시로

또한 ES6 일관성있는 별칭 resolve 사용할 수도 있습니다

//ABSOLUTELY THE SAME AS when
return $q.resolve(['one', 'two'])

$ q 지연된 안티 패턴 피하기

이 안티 패턴 피하기

var myDeferred = $q.defer();

$http(config).then(function(res) {  
   myDeferred.resolve(res);
}, function(error) {
   myDeferred.reject(error);
});

return myDeferred.promise;

$ http 서비스가 이미 약속을 반환하므로 $q.defer 로 약속을 할 필요가 없습니다.

//INSTEAD
return $http(config);

$ http 서비스가 만든 약속을 반환하십시오.