Angularjs Promise 실례 상세 설명

Promise
Promise 는 대상 입 니 다.함수 가 최종 적 으로 가능 한 반환 값 이나 던 진 이상 을 대표 합 니 다.바로 비동기 처리 값 입 니 다.
Promise 는 구조 함수 로 자신 에 게 all,reject,resolve 라 는 비동기 방식 으로 값 을 처리 하 는 방법 이 있 고 원형 에는 then,catch 등 똑 같이 낯 익 은 방법 이 있다.
2.왜 Promise 를 사용 합 니까?
Promise 대상 이 있 으 면 비동기 작업 을 동기 화 작업 의 절차 로 표현 하여 층 층 이 포 함 된 반전 함 수 를 피 할 수 있 습 니 다.이 밖 에 Promise 대상 은 통 일 된 인 터 페 이 스 를 제공 하여 비동기 제어 작업 을 더욱 쉽게 한다.
Promise 대상 은 다음 과 같은 두 가지 특징 이 있 습 니 다.
1.대상 의 상 태 는 외부의 영향 을 받 지 않 는 다.
Promise 대상 은 비동기 동작 을 대표 합 니 다.세 가지 상태 가 있 습 니 다.Pending(진행 중),Resolved(완료),Rejected(실패)입 니 다.비동기 작업 의 결과 만 현재 어떤 상태 인지 결정 할 수 있 고 다른 작업 도 이 상 태 를 바 꿀 수 없습니다.
2.상태 가 바 뀌 면 변 하지 않 고 언제든지 이 결 과 를 얻 을 수 있다.
Promise 대상 의 상태 가 바 뀌 었 습 니 다.두 가지 가능성 만 있 습 니 다.Pending 에서 Resolved 로 바 뀌 었 습 니 다.펜 딩 에서 Rejected 로.이 두 가지 상황 이 발생 하기 만 하면 상태 가 굳 어 다 시 는 변 하지 않 고 이 결 과 를 계속 유지 할 것 이다.
3.어떻게 Promise 를 만 듭 니까?
먼저 코드 를 붙 입 니 다:

define([
  'angularModule'
],function (app) {
  app.register.service('httpRequestService', ['$http', '$q', function ($http, $q) {
    return{
      request: function (params) {
        var deferred = $q.defer();
        $http({
          method : params.method,
          url : params.url
        }).success(
          function (data) {
            deferred.resolve(data);
          }
        ).error(
          function(data){
            deferred.reject(data);
          }
        );
        return deferred.promise;
      }
    }
  }])
});

 서비스
q 서 비 스 는 AngularJS 에서 자체 패키지 로 이 루어 진 Promise 구현 입 니 다.
deferred 대상 을 만 들 려 면 defer()방법 을 호출 할 수 있 습 니 다:

var deferred = $q.defer(); 
//deffered         ，          promise promise  。 
//promise        then、catch、finally    

Promise 에 서 는 대기 상태,완료 상태,거부 상태 등 세 가지 상 태 를 정의 합 니 다.
deffered API
1.deffered 대상 의 방법
1.resolve(value):성명 resolve()에서 promise 대상 이 pending 상태 에서 resolve 로 바 뀌 었 음 을 나타 낸다.
2.reject(reason):성명 resolve()에서 promise 대상 이 pending 상태 에서 rejected 로 바 뀌 었 음 을 나타 낸다.
3.notify(value):성명 notify()에서 promise 대상 unfulfilled 상 태 를 표시 하고 resolve 나 reject 전에 여러 번 호출 될 수 있 습 니 다.
2.deffered 대상 속성
promise:마지막 으로 돌아 오 는 것 은 새로운 deferred 대상 promise 속성 입 니 다.원래 의 deferred 대상 이 아 닙 니 다.이 새로운 Promise 대상 은 원래 Promise 대상 의 상태 만 관찰 할 수 있 을 뿐 deferred 대상 의 내 적 상 태 를 수정 할 수 없 으 면 작업 상태 가 외부 에서 수정 되 는 것 을 방지 할 수 있 습 니 다.
3.Promise API
deferred 인 스 턴 스 를 만 들 때 새로운 promise 대상 을 만 들 고 deferred.promise 를 통 해 이 인용 을 받 을 수 있 습 니 다.
promise 대상 의 목적 은 deferred 작업 이 완 료 될 때 관심 있 는 부분 을 허용 하여 실행 결 과 를 얻 는 것 이다.
4.promise 대상 의 방법
1.then(error Handler,fulfilled Handler,progressHandler):then 방법 은 Promise 의 다른 상 태 를 감청 하 는 데 사 용 됩 니 다.error Handler 감청 failed 상태,fulfilled Handler 감청 fulfilled 상태,progressHandler 감청 unfulfilled(미 완성)상태.또한,notify 리 셋 은 0 에서 여러 번 호출 될 수 있 으 며,해결 또는 거부(resolve 와 rejected)전에 진행 지 시 를 제공 할 수 있 습 니 다.
2.catch(error Callback)―promise.then(null,error Callback)의 단축 키
3.finally(callback)―promise 가 실행 되 는 지 거부 되 는 지 관찰 할 수 있 지만 마지막 value 값 을 수정 하지 않 아 도 됩 니 다.이것 은 promise 가 거부 되 든 해결 되 든 자원 을 방출 하거나 쓸모없는 대상 을 정리 하 는 일 을 할 수 있다.
q.자주 사용 하 는 몇 가지 방법:

defer()는 deferred 대상 을 만 듭 니 다.이 대상 은 resolve,reject,notify 등 자주 사용 하 는 방법 을 실행 할 수 있 습 니 다

all()은 Promise 의 배열 에 들 어가 대량으로 실행 하고 promise 대상 을 되 돌려 줍 니 다

when()에 불확실 한 매개 변 수 를 입력 하고 Promise 기준 에 부합 되면 promise 대상 을 되 돌려 줍 니 다

all()방법
어떤 방법 을 대량으로 실행 할 때 이 방법 을 사용 할 수 있다.all 이 있 으 면 여러 개의 비동기 작업 을 병행 하고 하나의 반전 에서 모든 반환 데 이 터 를 처리 할 수 있 습 니 다.
Promise.all 로 실행 합 니 다.all 은 배열 인 자 를 받 고 그 안의 값 은 결국 Promise 대상 으로 돌아 갑 니 다.이렇게 해서 세 개의 비동기 작업 이 동시에 실 행 된 것 은 모두 실 행 된 후에 야 then 안 으로 들 어 갈 수 있다.
그렇다면 세 개의 비동기 조작 이 되 돌아 온 데 이 터 는 어디로 갔 을 까?모두 then 안에 있 습 니 다.all 은 모든 비동기 작업 결 과 를 한 배열 에 넣 고 then 에 게 전달 합 니 다.바로 아래 results 입 니 다.그래서 다음 코드 의 출력 결 과 는:     

  var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      var funcB = function(){
        console.log("funcB");
        return "hello,funB";
      }
      $q.all([funcA(),funcB()])
      .then(function(result){
        console.log(result);
      });

실행 결과:

funcA
funcB
Array [ "hello,funA", "hello,funB" ] 

when()방법
when 방법 에서 매개 변 수 를 입력 할 수 있 습 니 다.이 매개 변 수 는 하나의 값 일 수 있 습 니 다.promise 표준 에 부합 되 는 외부 대상 일 수 있 습 니 다.

      var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      $q.when(funcA())
      .then(function(result){
        console.log(result);
      });

들 어 오 는 인자 가 확실 하지 않 을 때 이 방법 을 사용 할 수 있 습 니 다.
hello,funA
4.체인 요청
then()방법 을 통 해 promise 체인 호출 을 실현 할 수 있 습 니 다.then 방법 은 항상 새로운 promise 를 되 돌려 주기 때 문 입 니 다.

runAsync1()
.then(function(data){
  console.log(data);
  return runAsync2();
})
.then(function(data){
  console.log(data);
  return runAsync3();
})
.then(function(data){
  console.log(data);
});
function runAsync1(){
  var p = new Promise(function(resolve, reject){
    //       
    setTimeout(function(){
      console.log('    1    ');
      resolve('      1');
    }, 1000);
  });
  return p;      
}
function runAsync2(){
  var p = new Promise(function(resolve, reject){
    //       
    setTimeout(function(){
      console.log('    2    ');
      resolve('      2');
    }, 2000);
  });
  return p;      
}
function runAsync3(){
  var p = new Promise(function(resolve, reject){
    //       
    setTimeout(function(){
      console.log('    3    ');
      resolve('      3');
    }, 2000);
  });
  return p;      
}

실행 결과:

총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 Angularjs Promise 사례 에 대한 상세 한 설명 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!