ES6 Promise 시작

6002 단어

Promise


콘셉트

  • Promise는 간단하게 말하면 하나의 용기로 미래에 끝날 이벤트(보통 비동기적인 조작)의 결과를 저장한다.문법적으로 말하자면Promise는 하나의 대상으로 비동기적인 조작에 대한 정보를 얻을 수 있다
  • 특징

  • Promise 객체의 상태는 외부의 영향을 받지 않습니다.Promise 대상은 비동기적인 동작을 의미하며 세 가지 상태가 있습니다: pending (진행 중),fulfilled (성공),rejected (실패).비동기식 작업의 결과만 현재 상태를 결정할 수 있으며 다른 작업은 이 상태를 바꿀 수 없습니다
  • 일단 상태가 바뀌면 다시 변하지 않고 언제든지 이 결과를 얻을 수 있다.Promise 대상의 상태 변화는 두 가지만 가능합니다: pending에서fulfilled로, pending에서rejected로.이 두 가지 상황이 발생하기만 하면 상태는 다시 변하지 않고 이 결과를 계속 유지할 것이다. 이때를 Resolved(정형화)라고 부른다.변경 사항이 발생하면Promise 대상에 리셋 함수를 추가하면 바로 이 결과를 얻을 수 있습니다.이것은 사건과 달리 사건이 일단 놓치면 다시 감청하면 결과를 얻을 수 없다
  • 존재하는 결점

  • 취소할 수 없습니다. 만들면 바로 실행하고 중도에 취소할 수 없습니다
  • 리셋 함수를 설정하지 않으면Promise 내부에서 던진 오류가 외부에 반응하지 않습니다
  • 펜딩 상태일 때 현재 어느 단계인지 알 수 없음
  • 기본용법

  • ES6에 의하면 Promise 대상은 하나의 구조 함수로 Promise 실례를 생성하는 데 사용된다
      var promise=new Promise(function(resolve,reject){
      	if(/* */){
      		resolve(value);	//resolve Promise pending resolve, , 
      	}else{
      		reject(error);	//reject Promise pending rejected, , 
      	}
      })
    
  • Promise 실례가 생성된 후then 방법으로 Resolved 상태와rejected 상태의 리셋 함수
      promise.then(function(value){
      	//success code ...
      },function(err){	// 
      	//error code ...    
      })
    
    를 각각 지정할 수 있음
  • resolve나reject를 호출하면 Promise의 매개 변수 함수의 실행을 초래하지 않는다. 즉, resolve()를 통해 결과를 되돌려도 다음 코드
  • 를 실행할 수 있다.
  • Promise 실례는 then 방법을 가지고 Promise에 정의되었다.prototype에서.작용은Promise 실례에 상태가 바뀔 때의 리셋 함수를 추가하는 것이다. 리셋은 새로운 Promise 실례(원래의 Promise 실례가 아니다)를 되돌려준다.따라서 체인식 문법
  • 을 사용할 수 있다
  • Promise.prototype.catch () 방법은.nn(null,rejection)의 별명으로 오류가 발생했을 때의 리셋 함수를 지정합니다.또한 then 방법이 지정한 리셋 함수도 실행 중 오류가 발생하면catch 방법에 의해 포착됩니다.
  • Promise 상태가 Resolved로 바뀌었을 때 오류를 던지는 것은 무효
  • Promise 대상의 오류는 거품 성질이 있어 포획될 때까지 뒤로 전달된다.즉 오류는 다음catch문장에 포착된다
      getJSON('/post/1.json').then(function(post) {
      	return getJSON(post.commentURL);
      }).then(function(comments) {
      	// some code
      }).catch(function(error) {
      	//  Promise , getJSON then
      });
    
  • 일반적으로 then에서 두 번째 Reject 상태의 리셋 함수를 사용하지 말고catch를 사용하는 것이 가장 좋다
  • 주의:catch 방법이 되돌아오는 것은 또한Promise 대상이기 때문에 다음에 Then 방법을 계속 호출할 수 있습니다.오류가 없으면catch 방법을 건너뛰기
  • Promise.all 방법은 여러 개의 Promise 실례를 새로운 Promise 실례로 포장하는 데 사용됩니다: var p=Promise.all([p1,p2,p3]), 그룹의 요소가 Promise 실례가 아니라면 Promise를 통과합니다.resolve 방법은Promise 실례로 바꾸고 더 이상 처리합니다. (Promise.all 방법의 매개 변수는 그룹이 아닐 수 있지만,iterator 인터페이스가 있어야 하며, 되돌아오는 모든 구성원은Promise 실례입니다.)p의 상태는 두 가지가 있다
  • p1,p2,p3의 상태는fulfilled로 변하고 p의 상태는fulfilled로 변한다. 이때 p1,p2,p3의 반환값은 하나의 수조를 구성하여 p에 전달되는 리셋 함수
  • p1, p2, p3 중 하나만rejected로 변하면 p의 상태는rejected로 변한다. 이때 첫 번째reject의 실례적인 반환값은 p의 리셋 함수
  • 에 전달된다.
  • Promise.race 방법 역시 여러 개의 Promise 실례를 하나의 새로운 Promise 실례로 포장하는 것이다. var p=Promise.race([p1,p2,p3]).p1, p2, p3 중 하나의 실례가 먼저 상태를 바꾸면 p의 상태는 따라서 바뀐다. 그 먼저 바뀐Promise 실례의 반환값은 p의 리셋 함수에 전달된다.배열의 요소가 Promise 인스턴스가 아닌 경우 Promise를 통해resolve 방법은 이를 Promise 실례로 바꾸어 더욱 처리한다
  • Promise.resolve: 기존 객체를 Promise 객체로 변경합니다.매개 변수는 네 가지 상황이 있다
  • 매개 변수는 Promise 실례로 아무런 수정도 하지 않고 그대로 이 실례로 돌아갑니다
  • 매개 변수는 thenable 대상(then 방법이 있는 대상)으로 이 대상을 Promise 대상으로 바꾸고 thenable 대상의 then 방법
     let thenable = {
     	then: function(resolve, reject) {
     		resolve(42);
     	}
     };
     let p1 = Promise.resolve(thenable);
     p1.then(function(value) {
     	console.log(value); // 42
     });
    
    을 즉시 실행한다
  • 매개 변수는then 방법을 가진 대상이 아니거나 전혀 대상이 아니다.이 방법은 새로운 Promise 대상을 되돌려줍니다. 상태는 Resolved
  • 입니다.
  • 매개 변수가 없이 Resolved 상태의Promise 대상을 직접 되돌려줍니다.주의: 즉시 Resolve의 Promise 대상은 이번 이벤트 순환이 끝날 때가 아니라 다음 이벤트 순환이 시작될 때
     setTimeout(function(){	// 
     	console.log('three');
     },0)
     Promise.resolve().then(function(){	// 
     	console.log('two');
     })
     console.log('one');	// 
     // :one two three
    
  • Promise.Reject (reason) 방법은 새로운 Promise 실례를 되돌려줍니다. 이 실례의 상태는 Rejected이고, 리셋 함수는 즉시 실행됩니다.참고: Promise.Reject () 방법의 매개 변수는 그대로 Reject의 이유로 후속 방법의 매개 변수로 변한다
      const thenable = {
      	then(resolve, reject) {
      		reject(' ');
      	}
      };
      Promise.reject(thenable)
      .catch(e => {
      	console.log(e === thenable)	//Promise.reject(thenable) thenable catch e, reject 
      })
      // true
    
  • done():Promise 대상의 리셋 체인,then 방법이나catch 방법으로 끝나든지 마지막 방법에서 오류를 던지면 포착할 수 없음(Promise 내부의 오류가 전체 국면에 퍼지지 않기 때문에),done 방법은 항상 체인이 떨어질 수 있는 끝에 위치하고 발생할 수 있는 모든 오류
     asyncFunc()
     	.then(f1)
     	.catch(r1)
     	.then(f2)
     	.done();
     // done 
     Promise.prototype.done=function(onFulfilled, onRejected){
     	this.then(onFulfilled, onRejected)	// then , onFulfilled, onRejected 
     		.catch(function(reason){
     			setTimeout(() => {throw reason},0)
     		})
     }
    
  • 를 던질 수 있음
  • finally(): Promise 대상의 마지막 상태와 상관없이 실행할 동작을 지정하는 데 사용됩니다.그것과done방법의 가장 큰 차이점은 일반적인 리셋 함수를 매개 변수로 받아들이고 이 함수는 어쨌든 실행해야 한다는 것이다
  • Promise.try

  • 실제 개발에서 함수 f가 동기 함수인지 비동기 함수인지 구분하기 싫거나 Promise로 처리하고 싶은 상황이 발생할 수 있다.이렇게 하면 f가 비동기적인 조작을 포함하든지 않든지then 방법으로 다음 절차를 지정하고catch 방법으로 f가 던진 오류를 처리할 수 있기 때문이다.일반적으로 다음과 같은 문법을 채택한다. Promise.resolve().then(f).그러나 이렇게 쓰면 이번 이벤트 순환이 끝난 뒤에 실행됩니다
      const f = () => console.log('now');
      Promise.resolve().then(f);
      console.log('next');
      // next
      // now
      // f , Promise , 
    
  • 다음은 동기화 함수를 동기화하고 비동기화 함수를 비동기적으로 실행하며 통일된 API를 가진 쓰기
  • async 함수 사용
     const f = () => console.log('now');
     (async () => f())();	
     // , async , f , then .
     // async() = > f()  f() , promise.catch 
     console.log('next');
     // now
     // next
     // 
     (async() => f())()
     	.then(...)
     	.catch(...)
    
  • new Promise() 사용
     const f = () => console.log('now');
     (
     	() => new Promise(
     		resolve => resolve(f())
     	)
     )();
     console.log('next');
     // now
     // next
     		
      , Promise.try(f) 
    
  • 좋은 웹페이지 즐겨찾기