3-12.Async_Await
2023. 3. 30. 09:27ㆍJavascript/자바스크립트 제대로 배워볼래?
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- https://github.com/axios/axios -- 여기서 가져옴 -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script>
//Promise
// 서버 호출 해서 데이터를 받아오는 함수
// 서버로부터 받아올때까지 데이터를 기다려주겠다는 약속
var url = "https://05a8efa5-4259-4059-ab91-db8f428c94c6.mock.pstmn.io/productList";
var data = axios.get(url).then(function (response) {
console.log(response.data);
return response.data;
});
// promise
function getData() {
return new Promise(function (resolve, reject) {
axios.get(url).then(function (response) {
console.log(response.data);
resolve(response.data);
});
});
}
// async, await
async function getData2(path) {
return (await axios.get(path)).data;
}
// 위에서 async/await를 썼기에 여기도 await를 써야한다
// 근데 await는 async함수 내에서 써야하기 때문에
// 이 함수를 async 함수 안에 넣는것!
async function calculateSum() {
var data = await getData2(url);
var total = 0;
for (var item of data.products) {
total += item.price;
}
console.log(total);
}
// 근데 얘는 async await안써도 되는이유는?
// 기다릴 필요가 없기 때문!
calculateSum();
// var total = 0;
// getData().then(function (data) {
// for (var item of data.products) {
// total += item.price;
// }
// console.log(total);
// });
</script>
</body>
</html>'Javascript > 자바스크립트 제대로 배워볼래?' 카테고리의 다른 글
| 3-14.클래스(Class) (0) | 2023.03.30 |
|---|---|
| 3-13.모듈(Module) (0) | 2023.03.30 |
| 3-11.Promise (0) | 2023.03.30 |
| 3-10.Array Destructuring (0) | 2023.03.30 |
| 3-09.Object Destructuring (0) | 2023.03.30 |