비동기 : Promise

1. Promise

- 어떤 동작을 비동기로 실행하는 것

- 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체이다.

- 콜백헬이라고 불리는 지저분한 자바스크립트 코드의 해결책이다.

 

* Promise의 인스턴스 객체를 생성하는 부분은 동기적으로 실행이 된다.

* promise에서 결과를 가지고 있다가 then, catch할 때 결과를 꺼낸다.

* .then/ .catch를 실행할 때 비동기적으로 실행이 된다.

const condition = true;
const promise = new Promise((resolve, reject) => {  // Promise 인스턴스 객체 생성
	if(condition){  
    	resolve('성공')   //무언가를 실행 후 resolve를 호출하면 성공한 것
    } else{
    	reject('실패)    //reject를 호출하면 실패한 것
    }
})

promise
.then((message) => {
	console.log(message)
})
.catch((error) => {
	console.log(error)
})

 

2. 콜백와 Promise의 차이점

- 콜백함수 : 함수 안에 위치해서 함수 실행 시에 바로 실행된다. (콜백지옥 발생)

- Promise : 변수에 저장해 두었다가 필요할 때 호출할 수 있다. (콜백지옥 방지, 프로미스 지옥 발생)

 

3. Promise.all(배열)

- 여러 개의 promise를 동시에 실행시킨다.

- Promise 인스턴스 중 하나라도 실패 시 catch를 실행한다.

- allSettled를 이용해 실패한 것만 추려낼 수 있다.

- const promise1 = Promise.resolve('성공1')    => 바로 resolve 하는 promise

- const promise3 = Promise.reject('실패')   => 바로 reject 하는 promise

const promise1 = Promise.resolve('성공1')  //바로 resolve 하는 promise
const promise2 = Promise.resolve('성공2')  
Promise.all([promise1, promise2])
.then((result) => {
	console.log(result)
})
.catch((error) => {
	console.error(error)
})