프로미스에서도 콜백이 사용되긴 하지만 예측가능한 패턴에서만 이용한다
기본개념은 프로미스 기반 비동기적 함수를 호출하면 그함수는 Promise 인스턴스를 반환하게되고 성공 or 실패 두가지만 확인한다.
3가지 state 존재 (pending(대기), fulfilled(이행), Rejected(실패))
비동기 처리를 다른곳에서 하고싶으면 프로미스 객체를 넘기기만 하면된다.(마치 호출기를 다른사람에게 주듯)
// 콜백만 적용
function getData(callbackFunc) {
$.get('url 주소/products/1', function (response)
{ callbackFunc(response);
// 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
}); }
getData(function (tableData) {
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});
// 프로미스 적용
function getData(callback) {
// new Promise() 추가
return new Promise(function (resolve, reject) { // 성공 아니면 실패
$.get('url 주소/products/1', function (response) {
// 데이터를 받으면 resolve() 호출
resolve(response); }); }); }
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function (tableData) { // resolve()의 결과 값이 여기로 전달됨
console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});
resolve() 실행시 프로미스의 state가 fullfilled가 되고 then()을 통해 처리 결과 값을 받을 수 있다.
reject() 실행시 프로미스의 state가 rejected가 되고 catch()를 통해 에러 값을 받을수 있다
fetch 실행시 성공 실패 여부에 따라 Promise 실행하고 그에따라 then 이나 catch로 실행된다