Javascript - 비동기처리(2)(Promise)

Callback을 더 간단하게 정리하기 위해 Promise 사용해서 callback 지옥을 벗어 날 수 있다. 하지만, promise도 chaining으로 지옥으로 들어 갈수 있다는 점을 간과해서는 안된다.

 

Promise 개념을 도식화 하면 하기 그림과 같다. Promise의 중요한 개념은 fullfill과 reject인데 fullfill은 이행하다 뜻을 가지고 있고 reject는 거절하다 라는 뜻을 가지고 있다.

promise로 들어온 값이 에러면 reject를 실행해서 에러를 출력해주고, 에러값이 아니면 fullfill이 실행되어서 실행이 된다. 이후 pending 상태가 되어 다음 값을 기다리는 상태가 된다.

즉, 기다림(pending) -> 이행(fullfill) -> 기다림(pending)이거나 기다림(pending) - 거절(reject) - 기다림(pending)이 된다.

 

지난번 비동기 처리를 했던 값들을 다시 이용하면 Promise로는 다음과 같이 구현이 가능할 것 같다.(더 좋은 코드도 있을거 같지만...)

  *printString함수를 선언을 한다.

  *함수를 실행하고 A위에 promise상태는 peding으로 변했다.

  *promise는 .then을 통해서 callback을 사용하는 것보다 보기 쉽고 직관적으로 보인다.

  *then 그러고나서 라는 뜻처럼 printString 함수를 실행시키고 나서 .then()괄호 안에 함수를 실행한다.

  *then에 들어오는 data 인자는 printString() 실행시키고 난 결과가 들어온다.

  *.then().then()을 사용을 한다. 이렇게 .then().then()을 사용하는 방식을 chaining 방식이라고 한다.

  

에러처리

  *에러를 처리할때는 reject 함수를 활성화 시켜줘야하고, catch()라는 것을 사용해서 에러를 처리할 수 있다.

  *reject를 활성했기 때문에  then이 실행되는 것이 아니라 catch가 실행이 된다. 만약 then이 실행 됐으면 error 창이 뜨지 않았을 것이다.

  *resolve와 reject를 동시에 활성해주고 조건에 따라 resolve를 할지 reject할지 결정 해주면된다.

  *"error"일 때 catch가 실행되고 "A"일 때 then이 실행이 된다.

 

Chaining을 활용해서 callback 지옥을 벗어 날수 있으나, Chaining 지옥이 되긴한다. 하지만,  then으로 직관적으로 명시하기 때문에 callback hell 보다 보기 쉽다.

 

**promise를 활용할 때, 결과값이 return 값이 나올 거 같지만 promise{<pending>} 값이 나오기 때문에 code에 사용할 때 주의를 해야한다.

 

Promise.all(array)

 - Promise MDN 문서를 보면 prototype으로 연결되어 있는 것을 확인할 수 있으며, 거기에따른 메소드로 가지고 있다.

 - Promise.all은 promise로 처리해야할 함수들을 한번에 모아서 처리한다.

  *Promise.all(array)는 인자로 Array로 받고, Array로 결과를 return 한다.

 

promise.all 미사용(from codestates)

promise.all 사용(from codestates)

#Javascript#codestates#비동기처리#asyncronous#callbackhell#promise#promise.all#chaining