[자바스크립트]Promise

Promise란?

비동기를 간편하게 처리하는 데 도움을 주는 오브젝트이다. 들어가기에 앞서, 다음 개념을 보자.

1. Producing code: 정보를 전달하는 코드. ex) 네트워크에서 사용자 데이터를 로드하는 코드
2. Consuming code: producing code가 전달한 정보를 받는 코드. ex) 로드된 사용자 데이터를 받는 코드
3. Promise: producing code와 consumer code를 연결하는 자바스크립트 객체. promise는 subscribed code(consumer) 에게 모든 정보가 전달될 것이라는 '약속'을 함.

프로미스의 생성은 new Promise로 할 수 있다. promise을 실행하면 프로미스가 리턴되고 프로미스 안의 비동기 함수가 실행된다. 함수의 값이 true면 resolve()를 실행하고 에러가 나면 reject()를 실행한다. 즉 프로미스는 상태를 갖는다(fullfilled,rejected).

 

1. Producer

//1. Producer
const promise = new Promise ((resolve,reject)=>{

console.log('doing sonething...');
});

여기서 resolve와 reject는 자바스크립트 자체에서 제공되는 콜백들이다. executor가 결과를 받아오면, 다음 중 한 가지를 호출한다.

• resolve(value) - 성공시
• reject(errror) - 실패시

new Promise 생성자에 의해 만들어진 promise 객체는 다음과 같은 properties 를 가지고 있다.

• state: 'pending' → either 'fulfilled'(성공시) or 'rejected'(실패시)
• result: 'undefined → either 'value'(성공시) or 'error'(실패시)

Promise를 만드는 순간 이 콜백 중 하나가 바로 실행된다.

만약 네트워크 요청을 사용자가 요구했을때만 해야하는 경우라면 예를들어 사용자가 버튼을 눌렀을때 네트워크 요청을 해야한다면 위에 코드처럼 작성하게 되면 사용자가 요구하지도 않았는데 불필요한 네트워크 통신이 일어날 수 있다

 

=>새로운 Promise 가 만들어 질때는 전달한 executor 콜백함수가  바로 실행됨 

 

//1. Producer
const promise = new Promise ((resolve,reject)=>{

console.log('doing sonething...');
setTimeout(()=> {
	resolve('go')
} ,2000);
});

2.Consumer : then, catch, finally

Consumer 함수들은 .then, .catch, .finally를 사용해 값을 받아 올 수 있다.

 

then : promise가 정상적으로 수행이 된다면 값을 받아와서 원하는 기능을 수행하는 callback함수를 전달해줌

finally : 무조건 실행됨

catch: 에러가 발생하면 reject됨

//1. Producer
const promise = new Promise ((resolve,reject)=>{

console.log('doing sonething...');
setTimeout(()=> {
	//resolve('go')
    reject(new Error('no network')) //error 라는 object를 통해서 값을 전달
} ,2000);
});

//2.Consumer : then, catch, finally
promise
	.then(value =>{
		console.log(value);
})
	.catch(error =>{
    	console.log(error)
    })
    .finally(()=>{
    console.log('finally');
    })

 

 

 await 그리고 유용한 Promise APIs=>https://jssq2468.tistory.com/123?category=1008957 

async 와 await , 유용한 Promise APIs