< Javascript > 프로미스 객체

프로미스 Promise

자바스크립트 비동기 처리에 사용되는 class 객체
주로 서버에서 받아온 데이터를 화면에 표시할 때 사용

//new 키워드를 통해 Promise 객체를 생성
let promise = new Promise((resolve, reject) => {
	// 1. 정상적으로 처리되는 경우
	// resolve의 인자에 값을 전달 가능
	resolve(value);

	// 2. 에러가 발생하는 경우
	// reject의 인자에 에러메세지를 전달 가능
	reject(error);
});

프로미스는 resolve, reject 함수 를 매개변수로 받는 콜백함수가 매개인자임

Promise 객체는 생성될 때 자동으로 실행이 시작되고 정상적으로 처리될 때 resolve , 에러일 시 reject가 실행됨

🎈 프로미스의 상태

프로미스가 생성되고 종료될 때까지 3가지 상태가 있다

• Pending(대기) - 기본 상태
• Fulfilled(이행) - 비동기 처리를 수행할 콜백 함수가 성공적으로 작동
• Rejected(실패) - 에러 발생 시

🎈 프로미스 결과에 접근하기

❕ 프로미스의 결과는 undefined 으로 시작 콜백 함수가 성공적으로 작동하여 resolve(value)가 호출되면 value로, 에러가 발생하여 reject(error)가 호출되면 error로 변한다

단, 결과에 바로 접근할 수 없기 때문에 then, catch, finally 매서드를 사용해서 결과값을 꺼낼 수 있음

• then() - 정상적으로 작동하고 value 값을 뱉음

let promise = new Promise((resolve, reject) => {
	resolve("성공");
});

promise.then(value => {
	console.log(value);
	// "성공"
})

• catch() - 에러가 발생했을 시 reject함수 호출

let promise = new Promise(function(resolve, reject) {
	reject(new Error("에러"))
});

promise.catch(error => {
	console.log(error);
	// Error: 에러
})

• finally() - 정상 처리 여부와 관계없이 접근 가능

let promise = new Promise(function(resolve, reject) {
	resolve("성공");
});

promise
.finally(() => {
	console.log("성공이든 실패든 작동");
	// "성공이든 실패든 작동"
})

🎈 프로미스 체이닝

비동기 작업을 순차적으로 진행

.then, .catch, .finally 메서드들은 Promise를 반환하기 때문에 체이닝이 가능함

let promise = new Promise(function(resolve, reject) {
	resolve('성공');
	...
});

promise
  .then((value) => {
    console.log(value);
    return '성공';
  })
  //앞에 발생해서 리턴된 `성공`이라는 값이 다음 value로 들어감
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .then((value) => {
    console.log(value);
    return '성공';
  })
  .catch((error) => {
    console.log(error);
    return '실패';
  })
  .finally(() => {
    console.log('성공이든 실패든 작동');
  });

//성공
//성공
//성공
//성공이든 실패든 작동

🎈 Promise.all()

여러개의 비동기 작업을 동시에 처리할 때
배열을 인자로 받음 > 결과를 배열에 저장하여 새로운 프로미스를 반환

const promiseOne = () => new Promise((resolve, reject) => setTimeout(() => resolve('1초'), 1000));
const promiseTwo = () => new Promise((resolve, reject) => setTimeout(() => resolve('2초'), 2000));
const promiseThree = () => new Promise((resolve, reject) => setTimeout(() => resolve('3초'), 3000));

// 기존
const result = [];
promiseOne()
  .then(value => {
    result.push(value);
    return promiseTwo();
  })
  .then(value => {
    result.push(value);
    return promiseThree();
  })
  .then(value => {
    result.push(value);
   console.log(result);  
	 // ['1초', '2초', '3초']
  })

// promise.all
Promise.all([promiseOne(), promiseTwo(), promiseThree()])
  .then((value) => console.log(value))
  // ['1초', '2초', '3초']
  .catch((err) => console.log(err));

인자로 받는 배열에 있는 Promise 중 하나라도 에러가 발생하게 되면 나머지 Promise의 state와 상관없이 즉시 종료됨

Promise.all([
	new Promise((resolve, reject) => setTimeout(() => reject(new Error('에러1'))), 1000),
	new Promise((resolve, reject) => setTimeout(() => reject(new Error('에러2'))), 2000),
	new Promise((resolve, reject) => setTimeout(() => reject(new Error('에러3'))), 3000),
])
	.then((value) => console.log(value))
  .catch((err) => console.log(err));
	// Error: 에러1