Axios

· node.js 와 브라우저를 위한 Promise 기반의 HTTP 클라이언트
· 동일한 코드베이스로 브라우저와 node.js 에서 실행가능

fetch vs axios

⚪ Fetch
· XHR (ajax 에서 api 호출 방식) 을 대체하기 위해 ES6 버전 이후에 등장
· fetch 는 JS 내에 기본적으로 내장
· 데이터를 json 형식으로 받기 위해 json() 메서드를 사용

⚪ Axios
· fetch 를 더 효율적으로 사용하기 위해 개발됨
· 서드파티 라이브러리로서, 패키지를 따로 설치해야함
· 기본 타입을 json 으로 가져갈 수 있음

Axios 사용이유

· return 을 Promise 로 해주기 때문에 response 데이터 처리가 쉬움
· Fetch API (ES6 이상만 지원) 와 다르게 크로스 브라우징에 최적화되어 오래된 브라우저도 지원
· fetch 에 비해 axios 는 에러 처리가 간결함
· json() 메소드를 사용하지 않아도 자동으로 JSON 데이터 형식 변환
· 요청을 취소하거나 타임아웃을 걸 수 있음

⚪ 브라우저에서 사용시 CDN 링크 (head 구문에 입력)
👉 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios 문법

axios(config)

axios(url, [config])

axios.요청메서드(url, [, data [, config]])

<script>
<< TYPE 1 >>
	axios({
    		method: "get",
            url: "https://~",
            // ... (추가할 옵션들)
});
            
<< TYPE 2 >>
	axios("https://~", {
    		method: "get",
});

<< TYPE 3 >>
	axios.get("https://~", {
    		headers: {
            "Content-Type": "application/json",
            },
});

</script>

요청 config 옵션

⚪ URL
요청에 사용될 서버 URL 이고, config 에서는 필수값

⚪ baseURL
URL의 기본값 -> url = baseURL + url 로 표기 가능

url: "/post/1"
baseURL: "https://~"

위와 같이 설정하면 url 값은 baseURL + url 로 대체되어 사용됨

⚪ headers

⚪ params

⚪ data

⚪ withCredentials

⚪ response Type

⚪ tiemout
· 요청이 타입 아웃되는 밀리초(ms)를 설정
· 요청이 설정시간보다 지연될 경우 요청 중단