JS기본(promise)

JS는 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식으로 동작!

따라서 비동기 작업을 하기 위해 promise 객체를 생성해서 작업해준다.

 

●콜백 함수

1.가독성이 나쁘고 2.비동기 처리 중 발생한 에러의 처리가 곤란 3.여러 개의 비동기 처리를 한번에 처리하는 데도 한계O

 

○promise

1.단점 보완 2.비동기 처리 시점을 명확하게 표현 가능

 

Promise

 

promise는 프로미스를 생성하고 종료될 때까지 3가지 상태(states)(프로미스의 처리 과정)를 가진다.

 

대기(pending), 이행(fulfilled), 실패(rejected) 

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

다음과 같이 new Promise로 promise 객체를 생성한다!

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

 

resolve 는 성공, reject는 실패일 경우에 실행되는 함수이다. 

promise는 state와 result 두개의 property를 가지고

처음에는 state: pending으로 대기 상태에 있다가

 

1)resolve

        ↓

state: fulfilled

result: value

 

2)reject

        ↓

state: rejected

result: error

 

 

promise가 끝나고 난 다음의 동작 설정하기

: then, catch 메소드

 

const promiseOne = new Promise((resolve, reject) => {
	resolve();
});
promise1
    .then(() => {
    	console.log("then!");
    })
    .catch(() => {
    	console.log("catch!!);
	});			
    
    //then!

 

promiseOne에서 resolve가 호출되었기 때문에 then만 실행된다.

promise.then(
	function(result) {
    	console.log(result + 'Ok');
	},
    function(err) {
    	console.log('Nope.');
    }
);

이걸 아래와 같이 catch를 사용해서 코드작성해도 된다.

promise.then(
	function(result){
    	console.log('ok');
    }
).catch(
    function(err){
    	console.log('nope');
    }
).finally(
	function(){
    	console.log('finish!')
    }
)

finally의 경우 resolve,reject 둘 중 하나가 실행되면 실행되는 함수!

 

재사용

비슷한 비동기 작업을 할 때는 이미 생성한 new Promise(...)를 그대로 리턴하는 함수를 만들어 사용하기.

function testCode(number) {
	return new Promise((resolve, reject) => {
    	if (number > 5) resolve();
        else reject();
    });
}

setTimeout(() => {
	const promiseOne = testCode(2);
    promiseOne
    	.then(() => {
    		console.log('WOW!  1 then!');
    	})
    	.catch(() => {
    		console.log("OOPS 1");
    	});
    const promiseTwo = testCode(15);
    promiseTwo
    	.then(() => {
        	console.log('OKOK 2 then');
        })
        .catch(() => {
        	console.log('nope, catch 2');
        });
    }, 1000);
    
// OOPS 1
// OKOK 2 then

 

다음과 같이

 

1. new Promise 로 Promise 객체가 있는 testCode 함수를 생성하고

2. Promise 객체를 리턴하는 함수 promiseOne, promiseTwo 만들고

3. number 인자를 받아서 그 값에 따라 resolve, reject를 호출하여 

 

재사용 할 수 있다.