인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.
Promise
Promise는 자바스크립트의 비동기 처리로 발생하는 문제에 사용되는 객체이다.
<기본 개념>
var x = 1;
//서버로부터 데이터를 받아오는 code(ex : y = callServerData();)
var z = x + y;
//만약 서버로부터 데이터를 받아오는데 시간이 지연되는 경우,
//자바스크립트는 비동기 처리의 특성으로 인해 y값을 서버로부터 얻지 못한 채,
//var z = x + y; 코드를 해석한다.
//이 경우에 y에 어떠한 값도 할당되지 않아 에러가 발생한다.
//이러한 문제를 방지하기 위해 서버로부터 데이터를 받고 난 후에,
//그 다음 코드를 자바스크립트가 해석하도록 만드는 기능을 Promise라고 한다.
<활용 예시>
//Promise 기능을 사용하지 않는 경우
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
//mock Server 사용
//axios 오픈소스 라이브러리 사용(클라이언트와 서버간의 데이터 통신을 도와주는 라이브러리)
var url = "https://f65825be-630b-4e6b-8528-00de15d3e1bd.mock.pstmn.io/list";
var data = axios.get(url).then(function(response){
console.log(response.data);
return response.data;
});
//axios 라이브러리를 통해 data를 받아오는 code
var total = 0;
for(var Tage of data){
total += Tage.age;
}
console.log(total); // 결과 : 에러 발생
//에러 발생의 이유는 서버로부터 데이터를 받아오는데 시간이 걸리기 때문에,
//해당 url로부터 데이터를 요청한 후에(아직 데이터 받아오지 못한 상태)
//그 다음 코드를 실행하기 때문이다.(자바스크립트의 비동기 처리 특성)
//이 경우, data에는 어떠한 값도 없기 때문에 에러가 발생하는 것이다.
//이러한 문제를 방지하고자 Promise 기능을 사용한다.
//(데이터를 모두 받기 전까지 그 다음의 코드 실행을 보류함)
</script>
</body>
</html>
//Promise 기능을 사용하는 경우
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var url = "https://f65825be-630b-4e6b-8528-00de15d3e1bd.mock.pstmn.io/list";
function getData(){ //Promise 사용
return new Promise(function(resolve, reject){
axios.get(url).then(function(response){
console.log(response.data);
resolve(response.data);
});
});
}
//여기서 Promise의 parameter는 resolve와 reject가 있으며,
//resolve는 정상적으로 처리된 결과를 리턴해주는 parameter이고,
//reject는 에러가 발생한 경우 Promise 기능을 중단시켜주는 parameter이다.
var total = 0;
getData().then(function(data){
//정상적으로 서버로부터 데이터를 받아오면, resolve로 리턴된 값이 data로 들어온다.
for(var Tage of data){
total += Tage.age;
}
console.log(total); // 결과 : 에러 발생X
});
</script>
</body>
</html>
댓글