인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.
Async/Await
Async/Await은 비동기 처리의 문제에 사용되며, Promise와 기능은 유사하지만 더욱 편리하다.
<기본 개념>
//Async·Await VS 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";
function getData(){ //Promise 사용
return new Promise(function(resolve, reject){
axios.get(url).then(function(response){
console.log(response.data);
resolve(response.data);
});
});
}
var total = 0;
getData().then(function(data){
for(var Tage of data){
total += Tage.age;
}
console.log(total);
});
</script>
</body>
</html>
//Async·Await 기능을 사용하는 경우
<!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";
async function getData2(){ //Async·Await 사용
return (await axios.get(url)).data; //Promise 보다 더욱 간결한 code
};
//await axios.get(url) 코드는 url로부터 받아오는 데이터를 기다리겠다는 의미이며,
//return (await axios.get(url)).data; 코드는 이렇게 받아온 data를 리턴
//하겠다는 의미이다.
async function calculateSum(){ //Async·Await 기능 동작을 위한 임의의 함수
var data = await getData2(); //변수 선언 시 함수명 앞에 await 필요
var total = 0;
for(var Tage of data){
total += Tage.age;
}
console.log(total);
}
calculateSum(); //이 함수명 앞에는 await 필요X
//정리
//Async·Await 기능은 async function 안에서만 유효하기 때문에,
//async function calculateSum( )의 함수를 임의로 만들어 준 것이다.
//Async·Await 기능을 사용하려면 변수로 함수를 선언할 경우,
//함수명 앞에 반드시 await을 붙여줘야 한다.
//그 이유는 getData2 함수 안에 데이터를 불러오는 코드가 있기 때문이며,
//await을 붙이는 것은 데이터를 불러오는 시간을 기다리겠다는 의미이다.
//만약 어떤 함수안에 데이터를 불러오는 코드가 없는 경우라면,
//해당 함수명 앞에는 await을 함께 쓸 필요가 없다.
</script>
</body>
</html>
댓글