Java Script - Promise, Async, Await, 포스트맨 서버 mock server

Promise - ES6에서 추가된 기능이다. 서버에서 받은 결과가 다 나올 때 까지 다음 코드 실행을 멈추고 기다리게 한다.

    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

    <script>

        let url = "";

        let data = axios.get(url).then(function(response){

            console.log(response.data);

            return response.data;

        });

        let total = 0;

        for (let tool of data){

            total += tool.price;

        }

        console.log(total);

src는 axios를 사용할 수 있도록 불러오는 코드이다. https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

url 부분에는 원하는 url을 넣으면 된다.

url에서 데이터를 불러와 response를 반환하는 코드이다. 그 데이터에서 값을 모두 더하는 코드이다.

이렇게 실행하면 data is not iterable 에러가 나는데, 서버의 반환 값을 기다리지 않고 for 문을 실행했기 때문이다.

        function Data(){

            return new Promise(function(reslove, reject){

                axios.get(url).then(function(response){

                    console.log(response.data);

                    reslove(response.data);

                });

            });

        }

        let total = 0;

        Data().then(function(data){

            for (let tool of data.clothes){

                total += tool.price;

            }

            console.log(total);

        });

promise는 이렇게 사용할 수 있다. reslove는 정상적으로 작동되었을 때, reject는 에러가 났을 때 사용한다.

함수를 호출 한 뒤에 for 문을 사용하면 된다. 서버에서 데이터를 받아온 후에 실행하게 된다.

        async function Data(){

            return (await axios.get(url)).data;

        }

        async function calc(){

            let data = await Data();

            let total = 0;

            for (let item of data){

                total += item.price;

            }

            console.log(total);

        }

        calc();

async, await을 이용해서 이렇게 코드를 작성할 수도 있다.

 

Postman mock server - 포스트맨이라는 프로그램에서 제공하는 가짜 서버를 만들 수 있는 기능이다.

mock server 탭에서 request url 을 입력하고, 서버 이름을 입력해준 후에 create mock server를 누르면 된다.

collection 탭에서 만든 서버의 하위로 들어가면 default가 있다. 밑에 body에서 text를 json으로 변경한다.

{

    "clothes" : [

        {"category" : "jean", "price" : 45000},

        {"category" : "socks", "price" : 2000},

        {"category" : "outer", "price" : 80000}

    ]

}

이런 형태로 원하는 값을 넣은 후 save한다.

탭에서 서버 이름을 클릭한 후 오른쪽 상단에 no environment를 만든 서버로 변경한다.

탭에서 서버 이름 옆에 ...에서 run collection을 누른다. 그럼 run 만든 서버 이름 버튼을 누르면 실행된다.

get 옆에 만든 request url 을 클릭하면 하위 메뉴가 나오는데, request url을 클릭하면 사용할 수 있는 url이 생성된다.