[자바스크립트 고급 문법] Promise
| 목차 |
# Promise란?
자바스크립트에서 비동기 처리에 사용되는 객체입니다. 이때, 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해 주는 방식을 뜻합니다.
# 왜 Promise를 쓰는가?
원래 웹은 '앞에서부터'의 규칙을 가지고 있습니다. 요청(request)에 대한 반응(response)이 순서대로 이루어지고, 먼저 실행된 코드가 실행 완료 되어야 다음 코드를 실행하는 것처럼요. 그런데 자바스크립트에 Ajax(Asynchronous JavaScript and XML)이 추가되면서 XMLHTTPRequest 통신이 가능해졌고, 이를 통해 서버로 요청을 보낸 후 요청에 대한 응답을 받을 때까지 기다릴 필요 없이 다음 코드를 실행할 수 있게 되었습니다. 앞서 언급한 것처럼 Promise는 브라우저에서 제공하는 비동기 함수(Web APIs)를 실행할 때 비동기 처리를 하게 해 줍니다. 또한 비동기 함수의 실행이 완료된 뒤에는 then() 함수를 통해서 그 결과에 대한 코드를 실행할 수 있게 해 줍니다.
# Promise 사용법
Promise는 new 생성자 함수를 사용해서 생성합니다. 요청에 대한 응답에 실패하면 reject() 함수에 에러를 전달합니다.
const promise = new Promise((resolove, reject) => {
if(/* 처리 성공 */) {
resolve("결과 데이터");
} else {
reject(new Error("에러"));
}
});# 코드 예제
XMLHttpRequest는 비동기 통신으로 요청에 대한 응답이 없더라도 자바스크립트에 작성된 코드가 바로 실행됩니다.
function getData() {
const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); // HTTP Method, URL 정의
xhr.send(); // 요청 전송
xhr.onload = () => {
if (xhr.status === 200) {
// 정상적으로 응답되면 status가 200
const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수의 JSON 객체로 변경
console.log(res);
return res;
} else {
// 에러 발생
console.error(xhr.status, xhr.statusText); // 응답 상태와 응답 메시지를 출력
return;
}
};
}
const res = getData(); // 함수 호출
console.log(res); // 코드가 바로 실행되고, 이 시점에서는 서버로부터 응답이 오지 않은 시점이기 때문에 undefined
console.log("다음 코드를 실행합니다");위의 코드를 보면 getData() 함수를 먼저 호출한 후 콘솔창에 결과 데이터를 출력하는 코드가 있습니다.
하지만 이 코드가 실행되는 시점에서는 undefined로 데이터가 없습니다. 그리고 콘솔창에 "다음 코드를 실행합니다."를 출력한 뒤에야 서버로부터 받은 응답이 콘솔창에 출력됩니다. 이와 같은 문제는 클라이언트에서 서버로 요청을 보내고, 서버로부터 응답받은 데이터를 이용해 구현해야 하는 코드가 있는 경우에 발생합니다. 바로 이럴 때 Promise를 사용하는 것입니다. 응답이 완료된 후에 호출되는 then() 함수를 통해 결과를 받고 나서 구현해야 할 코드를 작성하는 것이죠. 예제를 통해 알아볼까요?
function getDataPromise() {
return new Promise((resolve, reject) => { // Promise 생성
const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); // HTTP Method, URL 정의
xhr.setRequestHeader("content-type", "application/json"); // 헤더 값 중 content-type 정의
xhr.send(); // 요청 전송
xhr.onload = () => {
if (xhr.status === 200) {
// 정상적으로 응답되면 status가 200
const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수의 JSON 객체로 벼경
resolve(res);
} else {
// 에러 발생
console.error(xhr.status, xhr.statusText); // 응답 상태와 응답 메시지를 출력
reject(new Error(xhr.status));
}
};
});
}
getDataPromise().then((res) => {
console.log(res); // 서버 응답이 완료된 후 코드가 실행됨
console.log("다음 코드를 실행합니다.");
});이 코드의 실행 결과를 볼까요?
위처럼 서버로부터 응답을 받아온 후에 코드가 실행되는 것을 확인할 수 있습니다!
그럼 다음 포스트는 Async와 Await에 대해 작성하도록 하겠습니다. 감사합니다
참조 <바닐라 자바스크립트> 순수 자바스크립트를 익히며 주도적인 개발자로 성장하기(고승원, 비제이 퍼플릭)