Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다.
npm을 통해서 프로젝트에 설치한다.
npm install axios
url
속성은 필수이고, 나머지 속성은 옵션이다.
axios({
method: 'get', // `method`는 요청을 할 때 사용될 메소드 이름입니다.
url: '/user/12345', // `url`은 요청에 사용될 서버 URL입니다.
data: {
// `data`는 요청 본문(request body)으로 전송할 데이터입니다.
// 'PUT', 'POST' 및 'PATCH' 요청 메소드에만 적용 가능합니다.
firstName: 'Fred',
lastName: 'Flintstone',
},
});
//예시
//callback
axios
.get('/details')
.then(function (response) {
// 성공했을 때
console.log(response);
})
.catch(function (error) {
// 에러가 났을 때
console.log(error);
})
.finally(function () {
// 항상 실행되는 함수
});
// async await 함수를 사용할 때,
try {
const data = await axios.get('url');
} catch {
// 오류 발생시 실행되는 함수
}
//대표적인 메소드
axios.get(url[, config]) // GET
axios.post(url[, data[, config]]) // POST
axios.put(url[, data[, config]]) // PUT
axios.delete(url[, config]) // DELETE
// 그외 사용가능한 메소드
axios.patch(url[, data[, config]]) //PATCH
axios.request(config) //REQUEST
axios.head(url[, config]) //HEAD
axios.options(url[, config]) //OPTIONS
axios.getUri([config]) //GETURI
입력한 url에 있는 데이터를 요청한다.
axios.get(url, [, config]);
GET은 서버에서 데이터를 가져와서 보여준다거나 하는 용도이다. 주소에 있는 쿼리스트링을 활용해서 정보
를 전달하는 것이지 GET 메소드는 값이나 상태등을 바꿀 수 없다. url
뒤에 쿼리스트링
을 붙여서 원하
는 조건에 맞춰서 데이터를 json형태로 가져올 수 있다.
크롬
개발자 도구로 데이터를 잘 가져왔는지 확인 할 수 있다.
상태코드 | 의미 |
---|---|
🟢 200 | 데이터를 받았음 |
🔴 404 | 데이터를 받지 못했음 |
새로운 리소스를 생성(create)할 때 사용한다.
axios.post(
'url',
{
data객체,
},
[, config],
);
// post 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.
로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용합니다. Post를 사용하면 주소창
에 쿼리스트링
이 남지 않기때문에 Get
보다 안전하다.