※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.
https://www.yes24.com/Product/Goods/105608999
바닐라 자바스크립트 - 예스24
실무 역량까지 한 번에 잡을 수 있는바닐라 자바스크립트 이론서자바스크립트는 이제 브라우저를 넘어 웹 애플리케이션뿐만 아니라 마이크로 컨트롤러까지 점점 사용하는 곳이 늘어나고 있다.
www.yes24.com
Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다. 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해주는 방식을 의미한다.
원래 웹은 요청(request)에 대한 반응(response)이 순차적으로 이루어지고, 먼저 실행된 코드가 실행이 완료되어야 다음 코드를 실행하는 순서를 가지고 있다. 그런데 자바스크립트에 Ajax(Asynchronous JavaScript and XML)가 추가되면서 XMLHttpRequest 통신이 가능해졌고, 그럼으로써 서버로 요청을 보낸 후 요청에 대한 응답을 받을 때까지 기다릴 필요 없이 다음 코드를 실행할 수 있게 되었다.
Promise는 자바스크립트에서 브라우저에서 제공하는 비동기 함수인 Web APIs를 실행할 때 실행한 코드가 완료될 때까지 대기하지 않고 바로 다음 코드를 실행할 수 있도록 해주고, 비동기 함수의 실행이 완료되면 then() 함수를 통해서 그 결과에 대한 코드를 실행할 수 있게 해준다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
function getData() {
const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); //HTTP Method, URL 정의
xhr.setRequestHeader("content-type", "application/json; charset=UTF-8"); //헤더 값 중 content-type 정의
xhr.send(); // 요청 전송
xhr.onload = () => {
if (xhr.status === 200) {
// 정상적으로 응답이 되면 status가 200
const xhrRes = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
console.log(xhrRes);
return res;
} else {
// 에러 발생
console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
return;
}
};
}
var res = getData(); // 함수 호출
console.log(res); // 코드가 바로 실행되고, 이 시점에는 서버로 부터 응답이 오지 않은 시점이기 때문에 undefined
console.log("다음 코드를 실행합니다.");
/*
getData() 함수를 먼저 호출한 후 결과 데이터를
콘솔창에 출력하지만 데이터가 없는 것을 확인. (undefined)
클라이언트에서 서버로 요청을 보내고 서버로부터 응답받은 데이터를
구현해야 하는 코드가 있는 경우 문제가 발생.
*/
// Promise를 사용해서 응답이 완료된 후 호출되는 then() 함수를 통해 결과를 받고 나서 구현해야 할 코드 작성
</script>
</body>
</html>
비동기이기 때문에 Ajax에서 데이터를 요청하여 받아오기 전에 console.log(res); 가 먼저 실행되어 undefined가 찍히는 것을 볼 수 있다. 그리고 나서 뒤늦게 success 부분에서 console.log(xhrRes); 가 실행 되어 데이터를 확인할 수 있다.
이것을 Promise를 사용하여 응답이 완료된 후 (Ajax로 데이터를 받아온 후) 호출이 될 수 있도록 구현한다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
function getDataPromise() {
return new Promise((resolve, reject) => { //Promise 생성
const xhr = new 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 (success)
const res = JSON.parse(xhr.response); // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
resolve(res);
} else {
// 에러 발생 (error)
console.error(xhr.status, xhr.statusText); //응답 상태와 응답 메시지를 출력
reject(new Error(xhr.status));
}
};
});
}
getDataPromise().then((res) => { //서버 응답이 완료된 후 코드가 실행 (결과값 파라미터)
console.log(res);
console.log("다음 코드를 실행합니다.");
});
</script>
</body>
</html>
콘솔에서 실행결과를 보면 다음과 같이 서버로 부터 응답을 받아온 후 다음 코드가 실행.
해당 책에는 간단한 개념 설명과 기본적인 구현 예시만 있어서 좀 더 깊게 알고 싶으면 밑에 링크를 참조해서 보면 도움이 될듯하다.
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
자바스크립트 Promise 쉽게 이해하기
(중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법
joshua1988.github.io
'02. JavaScript > 01. 기본개념, 문법 (ES6)' 카테고리의 다른 글
| JavaScript_02. 문법_14_Modules (0) | 2023.11.27 |
|---|---|
| JavaScript_02. 문법_13_02. Async/Await (0) | 2023.11.25 |
| JavaScript_02. 문법_12_Fetch API (0) | 2023.11.22 |
| JavaScript_02. 문법_11_XMLHttpRequest (0) | 2023.11.20 |
| JavaScript_02. 문법_10_Array Destructuring (0) | 2023.11.17 |
