[Axios] Axios 정리

Axios는 fetch의 단점을 보완한 Promise 기반의 HTTP 클라이언트 라이브러리이다.

fetch 메서드의 가장 큰 단점이라면 서버에서 보낸 에러코드를 성공한 통신이라고 생각한다는 것이다.
서버에서 400, 404등의 에러가 발생한 코드를 보내주면 fetch는 그 정보가 무엇이던간에 정보를 받았기 때문에(에러라도) 성공한 통신이라고 생각한다.

Axios 라이브러리를 사용하면 이 부분 또한 보완할 수 있다.
또한 fetch에서는 response를 json()을 통해 받아온 데이터를 json형식으로 바꾸어주어야 하지만 axios는 그럴 필요가 없다!!

Axios 구성

axios는 아래와 같이 구성되어있다.

	axios({
    	url: '/user', // 데이터를 요청할 주소
        method: 'post', // 통신 방식
        data: { // 보내야 하는 데이터
        	firstName: 'Mia',
            lastName: 'Seo'
        }
    }).then(res => res.data)

요청 메소드 명령어

원래라면 위와 같이 통신을 해야하지만 간편하게 통신할 수 있는 메소드들이 있다.
아래와 같은 명령 메소드를 사용하면 url, method, data 속성을 config에서 지정할 필요가 없다는 것이 가장 큰 장점이다.

• axios.get(url[, config])
• axios.post(url[, config])
• axios.put(url[, config])
• axios.patch(url[, config])
• axios.delete(url[, config])

Axios 인스턴스

보통은 통신하기 위한 baseURL을 통일하는 경우가 많기 때문에 그럴 때에는 Axios 인스턴스를 사용하면 좋다.

	cosnt httpClient = axios.create({
    	baseURL: 'http://some-domain.com,
      	params: {'key': process.env.REACT_APP_API_KEY},
        headers: {'X-Requested-With': 'XMLHttpRequest'}
    })

적용

axios 인스턴스와 요청 메소드 명령어를 함께 사용하면 아래와 같이 사용할 수 있다.

	cosnt httpClient = axios.create({
    	baseURL: 'http://some-domain.com,
      	params: {'key': process.env.REACT_APP_API_KEY},
    })

	httpClient.get('user', {
    	params: {
        	maxResult: 25,
        }
    }).then(res => res.data)
	  .catch(e => console.log(e))