반응형
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를 대체할 수 있다.)
반응형
'개발 > Web' 카테고리의 다른 글
[HTML , JS] data- 속성을 이용해 (기본 event로) 처리하기 (0) | 2021.12.31 |
---|---|
[JS] async 와 await (0) | 2021.12.31 |
[JS] 자바스크립트에서의 class - get, set, 상속 (0) | 2021.12.31 |
[JS] hoisting과 var let const (0) | 2021.12.31 |
[JS] "use strict"; 와 async,defer 자바 스크립트의 효율성 (0) | 2021.12.31 |