개발/Web

[JS] 비동기 처리 promise( )

유훈 | Yuhun 2021. 12. 31. 01:06
반응형

promise는 동작을 비동기적으로 처리할 수 있도록 도와주는 역할을 한다.

promise를 사용할 때는 producer 와 consumer로 나뉘는데 먼저 producer를 만들어보자.

// promise는 클래스로 new를 이용해 선언해 사용할 수 있다.
const ex1 = new promise((resolve, reject) => { // 콜백함수로 성공과 실패시의 함수를 인자로 전달한다.
   // 이 부분은 바로 실행
   resolve(value); // 성공시
   reject(new Error(“에러 메세지”)); // 실패시 
})

consumer는 값을 받아오는데 then / catch / finally를 이용해 받아올 수 있다.

// ex1이 정상적으로 수행된다면~ 이라는 뜻의 then
// chaining을 통해 ex1.then.catch 등이 가능하다. (then은 같은 promise를 리턴하기 때문 )
ex1
.then((value) => {
  // resolve에서 받아온 값으로 동작   
})
.catch((error) => {
  // 에러가 발생했을 때 가정
})
.finally(() => {     }) // 아무런 인자를 받지 않고 무조건 호출되어 진다.

en을 chaining으로 쓸 때 축약법

somethingPromise() // 원래 방식
.then( returnA => functionA(returnA) ) 
.then( returnB => functionB(returnB) );

somethingPromise() // 이런식으로 pomise의 리턴값을 then으로 받고 바로 functionA의 인자로 넣어준다.
.then(functionA) 
.then(functionB);

​promise는 fetch를 이용해 서버나 api와의 통신에도 쓰임으로 잘 알아둘 필요가 있다.

(+ axios 라이브러리를 이용해 fetch를 대체할 수 있다.)

반응형