axios 사용법

보편적으로 많이 사용하고 있는 http 비동기 통신 라이브러리입니다.

프론트엔드와 백엔드의 통신을 쉽게 해줍니다!

예전 프로젝트에서는 ajax를 사용했지만, 현재는 axios만 사용하고있습니다.

 

여러가지 특징이 있지만, 가장 편리한점은 응답 데이터를 JSON 형태로 자동 변경해준다는 점인데

프론트엔드에서 따로 데이터를 가공할 필요 없이, 백엔드에서 내려주는 데이터를 바로 활용할 수 있다는 점이 참 편리합니다.

 

- 제가 사용중인 axois 기본 틀 -

//axios.post(url, data)
axios.post('/api/test/', {
	_method: 'get',
	name: name,
    content: content,
})
.then((response) => {
	console.log(response)
})
.catch((error) => {
	console.log(error);
})
.finally(() => {
	console.log('성공/실패 여부 상관 없이 호출 끝난 후 항상 실행')
})

 

axois 사용법을 찾아보면 여러가지 방법이 나오지만, 저는 현재 위 방법을 제일 많이 사용하는중입니다.

 

axios.get / axios.post 로 구분해서 사용하는 방법도 있지만,

진행중인 프로젝트 백엔드 구조상 post로 호출하고, parameter data에 _method로 구분하는 형태로 되어있습니다.

 

- response 구조 -

{
	data: {},
    status: 200,
    statusText: 'OK',
    headers: {},
    config: {},
    request: {}
}

 

 

 

더 정확하고 딥~한 정보들은 아래 공식 문서에서 확인할 수 있습니다!

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs