Javascript - Promise

callback 함수 사용해서 어떤 작업 이후에 다른 작업 실행하게 했음

하지만 작업이 많아지게 되면 코드가 복잡해졌음

==> Promise 사용

 

1초마다 1씩 더해지는 알고리즘

function increaseAndPring(n, callback){
	setTimeout(() => {
    	const increased = n + 1;
        console.log(increased);
        if(callback){
        	callback(increased);
        }
    }, 1000);
}

increaseAndPrint(0, n => {
	increaseAndPrint(n, n => {
    	increaseAndPrint(n, n => {
        	increaseAndPrint(n, n => {
            	increaseAndPrint(n, n => {
                	console.log('작업 끝!');
                });
            });
        });
    });
});

-- 콜백 지옥

 

Promise 사용해서 간편하게 사용

const myPromise = new Promise((resolve, reject) => {
	setTimeout(() => {
    	// resolve('result'); // 성공했을 때
        reject(new Error()); // 실패하는 상황에서 사용
    }, 1000)
});

/*
myPromise.then(result => {
	console.log(result);
})
*/

myPromise.then(result => {
	console.log(result);
}).catch(e => {
	console.error(e);
})

 

promise 는 성공할 수도, 실패할 수도 있다.

성공하면 resolve로, 실패하면 reject 로 실행

 

promise를 만드는 함수 작성

// n이 5가 되면 에러가 나오는 함수
function increaseAndPring(n) {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {
        	const value = n + 1;
            if(value === 5) {
            	const error = new Error();
                error.name = 'ValueIsFiveError'; // 에러의 이름 설정
                reject(error);
                return;
            }
            console.log(value);
            resolve(value);
        }, 1000);
    });
}

// 함수 사용
increaseAndPrint(0).then(n => {
	// console.log('result: ', n);
    return increaseAndPrint(n);
}).then(n => {
    return increaseAndPrint(n);
}).then(n => {
    return increaseAndPrint(n);
}).then(n => {
    return increaseAndPrint(n);
}).then(n => {
    return increaseAndPrint(n);
}).catch(e => {
	console.error(e);
});

increaseAndPrint(0).then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.then(increaseAndPrint)
.catch(e => {
	console.error(e);
});

==> 연속적으로 같은 함수를 실행하기에는 매우 편하다.

하지만 다른 작업을 같이 실행하거나, 중간에 다른 값을 주는 상황 등에서는 사용하기 쉽지않다.

 

그래서 사용하는 것이 async / await

 

2020/09/06 - [Javascript] - Javascript - async / await