콜백 지옥
자바스크립트는 비동기 처리를 위해 콜백함수를 이용합니다.
간단한 예시를 들어볼게요
// 함수 선언
function findingUser(id, callbackFn) {
setTimeout(function() {
console.log('유저 찾는데 2초 걸려요');
const user = {
id: id,
email: id + "@gmail.com",
};
return callBackFn(user);
}, 200);
}
JavaScript
복사
// 함수 호출
findingUser("Lee", function() {
console.log("user is " + user);
});
JavaScript
복사
함수 선언부에서 콜백함수를 통해서 비동기 처리를 합니다. 콜백함수를 다른 함수의 인자로 넣어서 처리를 하고 있음을 알 수 있습니다.
•
id값을 받아 2초 후에 user라는 객체를 리턴하여, 인자로 받는 콜백함수에 user객체를 넣어 바로 실행시켜 user값을 보여줍니다.
그렇지만, 코드가 한 눈에 잘 들어오지 않기도 하고, 만약 수행할 것들이 많다면, 콜백함수 루프에 빠지게 됩니다.
그래서 이러한 점을 해결하고자 등장한 것이 Promise 개념입니다.
언제 주로 사용할까?
데이터를 얻는 경우에 많이 사용하게 됩니다.
데이터를 얻는데까지 약간의 지연이 있을 경우, 바로 데이터를 받아오지는 못하지만, 곧 넘어올 데이터입니다. 이런 경우에 접근하기 위한 방법을 Promise는 제공합니다.
윗 코드들을 다시 Promise객체를 이용해 바꿔보겠습니다.
function findingUser(id) {
return new Promise(function (resolve) {
setTimeout(function() {
console.log("데이터 가져오는데 2초 걸립니다.");
const user = {
id: id,
email: id + "@gmail.com",
};
};
resolve(user);
}, 200);
}
JavaScript
복사
findingUser("Lee").then(function(user) {
console.log("user": user);
});
JavaScript
복사
Promise 구조
resolve, reject라는 2개의 함수 인자를 받고, new키워드와 함께 객체를 생성합니다.
new Promise((resolve, reject) => {....});
JavaScript
복사
Promise는 인자로 받은 콜백함수를 내부에서 비동기적으로 처리합니다.
비동기적으로 처리되는 함수에는 정상 처리와 예외처리를 해줘야합니다.
•
resolve : 정상적으로 넘어올 미래의 데이터 결과를 인자에 줍니다.
•
reject : 미래에 발생할 예외를 인자로 넘겨줍니다.
예시를 하나 만들어보겠습니다.
// 함수 선언
function matching(user1, user2) {
// 유저 정보에 성별이 있다고 해볼게요(ex - user1.sex = male, user2.sex = female)
return new Promise((resolve, reject) => {
if(user1.sex == user2.sex) {
reject(new Error("매칭 실패");
} else {
resolve("매칭 성공");
}
};
}
// 함수 호출
matching(male, female)
.then((result) => console.log("결과" : result))
.catch((error) => console.log("결과" : error));
JavaScript
복사
Promise객체는 2가지의 메소드를 지니고 있습니다.
•
정상적인 인자를 넘기는 경우(resolve 함수의 경우)
◦
then 메소드를 호출
•
비정상적인 인자를 넘기는 경우(reject 함수의 경우)
◦
catch 메소드를 호출
사용 예시
Promise를 직접 코드로 생성해서 리턴해주기보다는 많은 경우엔 리턴 받은 Promise객체를 사용하는 경우가 많습니다.
대표적인 예시로는 Fetch함수
fetch함수를 이용하면, API의 URL을 인자로 적고, 미래 시점에 받을 호출 결과(데이터)를 Promise객체로 리턴받습니다.
Jsonplaceholder를 이용해서 fetch함수를 작성해보겠습니다.
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));
// 이 경우 then메서드를 통해 response가 콘솔에 찍힙니다.
JavaScript
복사
메서드 체이닝
then과 catch 메서드는 또 다시 Promise객체를 반환하므로, 해당 메서드들 뒤에 계속적으로 then()과 catch()를 적어줄 수 있습니다.
이 점을 이용하면 좀 더 분기를 잘게 쪼개서 에러를 잡아내거나 특정 원하는 값을 얻어낼 수 있겠죠?