[JavaScript] Promise - 콜백 지옥에서 탈출하기

스머리·2023년 7월 10일
0

JavaScript

목록 보기
3/23

Pending : 비동기 작업이 진행중이거나 작업이 시작할 수도 없는 문제가 발생함.
Fulfilled : 비동기 작업이 정상적으로 완료됨.
Rejected : 비동기 작업이 실패함. (서버 응답하지 않거나, 시간이 오래 걸려 자동으로 취소된 경우.)

Promise

어떤 함수가 프로미스를 반환한다는 것은 이 함수는 비동기 작업을 하고, 이 작업의 결과를 프로미스 객체로 반환받아 사용할 수 있는 함수라는 뜻.

콜백지옥을 피하고, 좀 더 가독성있고 깔끔한 비동기 처리를 할 수 있게 도와준다.

promise 객체 만들기

let promise = new Promise(function(resolve, reject) {
	// executor
 });

new Promise에 전달되는 함수는 executor(실행자, 실행함수)라고 부른다.
executor의 인수 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백이다.

  • resolve(value) - 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
  • reject(error) - 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
let promise = new Promise(function(resolve, reject) {
	// 프로미스가 만들어지면 executor 함수는 자동으로 실행.
  
  	// 1초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 '완료'가 됨.
  	setTimeout(()=>resolve('완료'), 1000);
});
  1. executor는 new Promise에 의해 자동 즉각적으로 호출된다.
  2. executor는 인자로 resolve와 reject 함수를 받는다. 이 함수들은 자바스크립트 엔진이 미리 정의한 함수이므로 개발자가 따로 만들 필요가 없다. 다만, 둘 중 하나는 반드시 호출해야 한다.


then





참고 : 한입 크기로 잘라 먹는 리액트, 모던 JavaScript 튜토리얼

profile
꾸준히 나아가는 프론트엔드 개발자

0개의 댓글