비동기 코딩을 할 때 콜백 함수를 중첩해서 사용하는 콜백 지옥을 막을 수 있다.
const condition = true;
const promise = new Promise((resolve, reject) => {
if(condition){
resolve('성공');
}
else {
reject('실패');
}
});
promise
.then((message) => { // resolve()가 실행되면
console.log(message);
})
.catch((error) =>{ // reject()가 실행되면
console.error(error);
})
.finally(() => {
console.log('무조건');
})
주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
동기식 처리가 되어 문제가 되는 상황
function getData() {
$.get('url 주소/porducts/1', function(response){
tableData = response;
});
return tableData
}
console.log(getData()); // undefined. 서버에서 받아오기도 전에 실행되어 버린다(비동기가 필요).
비동기 처리를 위한 콜백 함수 사용
function getData(callbackFunc) {
$.get('url 주소/porducts/1', function(response){
callbackFunc(response);
});
}
getData(function(tableData){
console.log(tableData);
});
비동기 처리를 위한 프로미스 사용
실행이 완료된 후 결과값을 then이나 catch 메서드를 통해 박는다.
function getData() {
// promise 추가
return new Promise(function(resolve, reject) {
$.get('url 주소/products/1', function(response) {
if(response){ // 성공 시 resolve
resolve(response);
} // 실패 시 reject
reject(new Error("Request is failed"));
});
});
}
// getData의 호출이 끝나면 then()이 호출된다.
// resolve()의 결과값 response를 data로 받는다.
getData().then(function(data){
colsole.log(data);
}).catch(function(err){
colsole.log(err);
});