자바 스크립트는 함수를 인자로 받을 수 있다. 이 점을 잘 인식해야 한다. 여기서 모든 헛갈림이 시작된다.
아래는 인자를 함수로 받는 함수의 정의(선언)
Ex)
function getData(callbackFunc) {
$.get('url 주소/products/1', function (response) {
if(response){
callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
}
});
}
이렇게 인자를 함수로 받은 함수를 사용(호출) 할 때 인자로 전달된 함수를 정의(선언) 해서 쓴다.
getData(function(tableData){
console.log(tableData);
});
즉, callbackFunc = function(tableData){
console.log(tableData);
} 이 되는 셈.
프로미스를 쓰면, 이렇게 함수를 정의한다.
function getData() {
return new Promise(function(resolve, reject){
$.get('url 주소/products/1', function(response){
if(response){
resolve(response);
}
reject(new Error("Request is failed"));
});
});
}
즉 promise 라는 객체를 생성 시키는 방법은 function(resolve, reject)함수를 생성자 인자로 던져 주면 된다.
여기서 promise를 return 하는 이유는 return을 함으로써 getData() 함수 밖에 쓸 수(즉 콜백 지옥을 벗어날 수)있기 때문이다.
그리고 promise 의 생성자 인자로 던져진 함수 내부에 시간이 걸리는(즉, 비동기 처리에 원인이 되는- 볼드체 부분) 코드를 넣으면 된다.
그리고 나서 resolve() 함수에 비동기 처리된 결과 값(response)를 넘겨준다.
getData().then(function(data){
console.log(data);
})
그러면 위와 같이 then() 안에 인자로서 resolve(reponse)를 실제 어떤 동작을 하는지 정의(선언) 해주면 된다.
즉, resolve(reponse)는 맨 위의 callbackFunc(response)와 똑같은 역할을 한다.
getData().then(function(data){
console.log(data);
}).catch(function(err){
console.log(err);
});
에러처리는 위와 같이 catch()를 이용한다.
간단히 말해, then에 들어가는 인자는 resolve()를 함수로서 구체화 하는 코드가 들어가고,
catch에 들어가는 인자는 reject()를 함수로서 구체화 하는 코드가 들어가면 된다.
