[JavaScript] Promise

 

비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아진다. 

 

when?
프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 

 

 

🎇Promise의 장점

- 비동기 처리 시점을 명확하게 표현할 수 있다. 

- 연속된 비동기 처리 작업의 수정, 삭제 추가가 편하다. 

- 비동기 작업 상태를 쉽게 확인할 수 있다. 

- 코드의 유지 보수성이 증가한다

 

Promise 생성자의 인수는 비동기 처리 작업을 하는 함수를 지정하며, 

함수 내부에서 비동기 처리 완료 메소드인 resolve()와 reject()를 호출한다. 

 

 

📌 객체 생성

const promise = new Promise(function (resolve, reject) {
 
});

이렇게 생성된 promise 객체는 두 가지의 내부 프로퍼티를 가진다. 

- state : 처리 상태 

- result : 결과값

 

resolve가 실행됐을 때에는 

- state : fulfilled 

- result : value 

 

reject가 실행됐을 때에는 

- state : rejected

- result : error 

이다.

 

이를 통해 현재 제작 코드의 진행 상황(promise.state) 과 결과 값(promise.result)을 확인할 수 있다. 

 

 

 

📌 resolve()와 reject()  :: 콜백 함수가 잘 기능하고 결과가 성공이면 resolve를 실패하면 reject를 호출한다. 

const promise = new Promise( (resolve, reject) => {
	if(val === true){
    	resolve('ok');
    }else(val === false){
    	reject('nope');
    }
});

 

📌 then()  :: 보통 resolve된 상태일 때 호출한다. 

promise.then( (value) => {

});

 

 

📌 then()  :: reject 된 상태일 때 호출한다. 

promise.catch( (value) => {

});

 

 

 

 

 

📌📌📌 최종 코드

const promise = new Promise( (resolve, reject) => {
	if(val === true){
    	resolve('ok');
    }else(val === false){
    	reject('nope');
    }
});

promise.then( (value) => {
	console.log(value);    // 결과 : 'ok'
});

promise.catch( (value) => {
	console.log(value);    // 결과 : 'nope'
});

 

✔ Promise 생성자는 매개변수는 콜백함수이다. 

✔ 콜백 함수는 resolve와 reject 두 개의 매개변수를 받는다.