드림코딩 자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)
영상을 보며 정리하려고 한다!
비동기 처리를 하나의 패턴으로 콜백함수를 사용한다. 하지만 콜백 패턴은 콜백 헬이나 에러 처리가 곤란하다는 문제가 있어 ES6에서는 프로미스가 도입되었다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다!
new
연산자를 사용해서 오브젝트를 생성할 수 있다. resolve
와 reject
함수를 인수로 전달받는다. // 프로미스 생성
const promise = new Promise((resolve, reject) => {
});
then
, catch
, fianlly
를 사용하여 후속 처리를 한다. then
catch
finally
then
, catch
, finally
후속 처리 메서드는 언제나 프로미스를 반환하므로 연속적으로 호출할 수 있다. 이를 프로미스 체이닝이라 한다. promise.js:57 Uncaught (in promise) Error
라고 콘솔에 출력된다.catch
를 넣어주어 Error를 Handling 한다.catch
를 넣어 프로미스 체인이 실패하지 않도록 한다. 순서를 변경해가며 코드를 작성하다보면 이해가 더 쉬울 것이다!UserStorage
클래스를 Promise로 바꿔주기!onSuccess
, onError
를 지우고 return new Promise ...
를 추가해준 뒤 resolve
, reject
를 작성한다.