[Javascript] 통신용 라이브러리: axios

#Javascript

axios는 ajax 등의 웹 통신 기능을 제공하는 라이브러리 중 하나다.
jquery와 비교하면, 타입스크립트도 사용이 가능하고, 요청 취소도 가능하며, 통신 기능만을 전담하므로 가볍다는 것이 장점이다.
약간의 단점은, ES6 버전의 자바스크립트 문법을 사용하므로, 낮은 버전의 브라우저에서는 구동하지 않을 수도 있다는 것이다. 하지만 그것도 바벨, 웹팩 등으로 트랜스파일을 가하면 해결될 문제다.
ES6의 비동기 문법은 이걸 https://blog.naver.com/sssang97/221641377051

자바스크립트 버전에 대한 문제는 바벨이나 https://blog.naver.com/sssang97/221657503165

웹팩 등을 참조하길 바란다. https://blog.naver.com/sssang97/221699091028

아마 리액트 등의 환경을 이미 구축해서 사용하고 있다면 대충... npm으로 다운받고 있는대로 사용하면 된다.

제이쿼리처럼, 소스에 링크를 포함하는 것으로 테스트를 해볼 수도 있다.
여기 링크가 있다.
https://cdnjs.com/libraries/axios

1~100 범위의 random값을 서버에 ajax 방식으로 요청해 받아오는 간단한 코드를 짜보도록 하겠다.
html 소스는 이런 식으로 짤 수 있다.

<html>
    <head></head>

    <body>
        <button onclick="onButtonClicked()">붐</button>
        <h2 id="boom">0</h2>
    </body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
    <script>
        function onButtonClicked()
        {
          axios({
            method: 'get', //통신 방식
            url: '/ajax', //통신할 페이지
            data: {} //인자로 보낼 데이터
          })
            .then(response=>{
                document.getElementById('boom').innerText=response.data.num;
                console.log(response);
            })
            .catch(error=>{
                document.getElementById('boom').innerText='error';
                console.log(error);
            })
        }
    </script>
</html>

여기서 사용된 함수는 ajax다.
이건 통신할 방식(get or post, ...), 통신할 페이지 주소, 전달할 인자들을 오브젝트 형식으로 넘겨준다.

그럼 axios 함수는 비동기 처리를 위한 Promise 객체를 반환한다. 이 객체는 then과 catch 메서드를 사용해서 완료 시점에 처리될 핸들러를 설정한다. 데이터를 성공적으로 받아오면, then에 전달된 함수를 호출하며 결과들을 인자로 전달한다.
그리고 인자로 받은 값의 data 멤버에 그 받아온 실제 데이터들이 들어있다.

이건 서버 상의 코드다. 환경은 node.js express인데, 그게 중요한건 아니고.
ajax라는 페이지로 요청을 해오면, 바로 저러한 형태의 Json 오브젝트를 문자열로 변환해서 보내준다.
num에는 보내줄 랜덤값을 넣고.

그럼 대충 이런식으로 잘 동작하는 것이다.

그리고 axios 함수는 다른 방식으로도 사용할 수 있다.
axios 안에는 get, post 등의 함수가 감춰져있었는데... 그냥 형식만 좀 다르다.
첫번째 인자로 요청할 페이지, 나머지를 오브젝트로 전달한다.

마찬가지로 잘 돈다.

참조
http://webframeworks.kr/tutorials/nextjs/nextjs-006/
https://github.com/axios/axios