JavaScript-Study/3-11(Promise).html at main · rkdbs/JavaScript-Study · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
    <title>Promise</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
    <script>

        // var x = 1;
        // var y = callServerData();
        // var z = x + y; // error 발생 : 서버로부터 y값을 받아오기 전에 실행하므로 에러가 발생한다.

        var url = "https://78aeb894-7efa-4ce7-a6fe-5ef1b0f62dab.mock.pstmn.io/productList";

        // // axios 외부 라이브러리 사용
        // var data = axios.get(url).then(function (response) {
        //     console.log(response.data);
        //     return response.data;
        // })

        // var total = 0;
        // for(var item of data) {
        //     total += item.price;
        // }
        // console.log(total);


        //Promise 사용
        function getData() {
            return new Promise(function(resolve, reject) { //resolve : 정상적으로 실행 / reject : 취소
                axios.get(url).then(function (response) {
                    console.log(response.data);
                    resolve(response.data);
                });
            });
        }

        var total = 0;
        getData().then(function(data) {
            for(var item of data.products) {
                total += item.price;
            }
            console.log(total);
        });

    </script>
</body>
</html>