일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- js promise
- javascript eventloop
- 순차리스트
- javascript destructuring
- es6 destructuring
- react class method bind
- react event bind
- 크롬 익스텐션 개발
- DOM API
- parcel
- react
- task queue
- javascript class method bind
- client side rendering
- JavaScript
- es6 promise
- Browser API
- javascript spread
- react lifecycle
- javascript arrow function
- 선형리스트
- es6 symbol
- es6 module
- #javascript #자바스크립트 완벽가이드 #자바스크립트 코뿔소
- server side rendering
- es7 async await
- web server vs was
- chrome extension development
- 자료구조
- js arrow function
- Today
- 49
- Total
- 400,421
비실이의 개발 성장기
javascript Promise 알아보기 본문
# Promise 란?
-
promise 의 어원 ‘약속하다’
-
javascript 의 Promise 객체는 비동기 연산을 수행하고 연산이 종료되면 결과를 알려주기 위해 사용합니다. (비동기 연산 결과를 알려주겠다고 약속하는 것)
-
Promise 는 ES6 에 추가 된 객체이며, ES6 를 지원하지 않는 구형 브라우저에서 사용하려면 polyfill 을 해야 합니다.
-
Promise.prototype.finally / Promise.any 등... Promise 객체에 유용한 메소드 제안 및 추가가 활발히 진행되고 있습니다. (Github tc39 - proposal 참고)
# Promise 상태종류 & 사용 코드
-
Promise 객체는 총 3가지 상태 중에 하나를 가집니다.
-
대기(pending): 아직 작업이 완료되지 않은 상태 또는 초기 상태
-
이행(fulfilled): 작업이 성공적으로 완료된 상태
-
거부(rejected): 작업 수행 중, 어떠한 요인으로 인해 실패한 상태
-
-
작업이 성공적으로 완료되면 Promise.resolve() 메소드를 통해 결과 값으로 이행하는 Promise 객체를 반환합니다.
-
작업이 실패(에러) 되면 Promise.reject() 메소드를 통해 거부하는 Promise 객체를 반환합니다.
-
Promise.prototype.then() / Promise.prototype.catch() 메소드는 arguments 로 콜백함수를 받는데, 이 콜백함수를 통해 이행 / 거부 결과를 확인할 수 있습니다.
-
Promise.prototype.finally() 는 이행 / 거부 결과에 상관없이 무조건 한번 실행되는 메소드
- .finally() 메소드는 현재 TC39 proposal stage - 4 단계로 아직 ECMA-262 표준에 등재된 API 는 아닙니다.
- 그러므로 .finally() 메소드를 사용하려면 polyfill 을 해줘야 합니다.
-
Promise 이행 / 거부 결과 확인을 위한 코드 예
function fetchData() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
/* resolve / reject 주석을 풀어가며 결과 확인해보기 */
resolve("success!");
// reject("fail!");
}, 2000);
});
}
const getData = function() {
let isLoading = true;
/* 1. catch 를 체이닝 형태로 사용한 코드 */
fetchData()
.then(function(result) {
console.log("promise then: ", result);
})
.catch(function(error) {
console.error("promise catch: ", error);
})
.finally(function() {
console.log("promise finally");
isLoading = false;
});
/* 2. catch 를 then() 콜백 형태로 사용한 코드 */
// fetchData()
// .then(function(result) {
// console.log("promise then: ", result);
// }, function(error) {
// console.error("promise catch: ", error);
// })
// .finally(function() {
// console.log("promise finally");
// isLoading = false;
// });
};
getData();
-
Promise 처리과정을 보여주는 이미지
# Promise 사용하는 경우
-
Ajax 기반 http 통신을 하는 함수 (브라우저 fetch() 함수는 결과값으로 Promise 객체를 반환)
-
... 또 어떤게 있을까요?
# [번외] 다음 코드의 실행 결과는 어떻게 될까??
-
Hint: javascript 의 Micro Task Queue / Task Queue 에 적재 된 작업이 처리되는 순서 알아보기
setTimeout(function() {
console.log("1");
}, 0);
Promise.resolve().then(function() {
console.log("2");
});
console.log("3");
# 참고문서
Promise
Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.
developer.mozilla.org
# 잘못된 내용은 댓글 남겨주세요.
'프론트엔드 > javascript' 카테고리의 다른 글
javascript Spread 문법 (0) | 2020.06.05 |
---|---|
javascript async & await 알아보기 (0) | 2020.05.30 |
javascript Promise 알아보기 (0) | 2020.05.29 |
ECMAScript2015(ES6) 알아보기 (0) | 2020.05.23 |
[js Q&A] ES6 class 에서 method bind 를 해야하는 이유 답변 (0) | 2020.05.11 |
[js Q&A] var 와 let 차이점 답변 (0) | 2020.02.11 |