axios 라이브러리
현재 가장 많이 사용되는 자바스크립트 HTTP 비동기 통신 라이브러리
HTTP 요청을 Promise 기반으로 처리한다.
fetch 함수
HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API
axios vs. fetch
| axios | fetch |
|---|---|
| 라이브러리 설치 필요 | 브라우저 빌트인 |
| data 속성 사용 | body 속성 사용 |
| JSON 형식으로 자동 변환 | .json() 메서드 사용 필요 |
| 요청과 응답 가로채기 가능 | x |
| 요청 취소와 타임아웃 가능 | x |
| status가 200이고 statusText가 ‘OK’라면 성공 | 응답 객체가 ok 속성을 포함하면 성공 |
| CSRF 보호 | x |
GET 요청과 응답
후속 처리 메서드 then을 사용하는 방식으로 GET 요청을 보내봤다.
axios
axios({요청 옵션})
axios.{메서드}(url [, data [, config]])
GET 요청
axios로 요청을 보낼 땐 다음과 같이 요청에 대한 정보를 객체로 만들어 전달하면 된다.
axios({
url: 'https://reqres.in/api/users/',
method: 'get',
params: { id: 2 },
}).then((res) => {
// 후속 처리
});또한 axios는 요청 메서드에 대한 aliases를 제공한다. method 속성을 따로 작성하지 않고, axios.get와 같은 메서드를 통해 바로 get 요청을 작성할 수 있다.
axios.get('https://reqres.in/api/users/2')
.then((res) => {
// 후속 처리
});옵션을 주고자 할 땐 다음과 같이 줄 수 있다.
axios.get('https://reqres.in/api/users', {
params: { id: 2,},
})
.then((res) => {
// 후속 처리
});GET 요청에 대한 응답
서버에 GET 요청을 보내고 받은 response를 확인해봤다. response의 내용은 다음과 같다.
response.config: 요청에 대해 axios에 설정되어 있는 구성response.data: 서버로부터 받은 응답(데이터)response.headers: 서버 응답의 헤더response.request: 서버가 받은 요청response.status: 서버 응답의 HTTP 상태 코드response.statusText: 서버 응답 HTTP 상태 메시지
fetch
fetch(url [, options])
GET 요청
fetch는 요청을 보내려는 url과 옵션을 전달할 수 있다.
fetch('https://reqres.in/api/users/2', {
method: 'get',
})
.then((res) => res.json())
.then((data) => {
// 후속 처리
});옵션이 없는 경우 생략할 수 있다.
fetch('https://reqres.in/api/users/2')
.then((res) => res.json())
.then((data) => {
// 후속 처리
});GET 요청에 대한 응답
fetch 요청에 대한 응답은 (axios와 달리) Response 객체다.
response.body: 서버로부터 받은 응답(데이터)response.ok: 서버 응답의 HTTP 상태 코드가 200~299에 해당하는지response.headers: 서버 응답의 헤더response.status: 서버 응답의 HTTP 상태 코드response.statusText: 서버 응답 HTTP 상태 메시지
axios와 fetch의 응답 데이터를 다루는 방식
axios는 response에 객체 형태의 data를 보내주기 때문에 json 형식으로 파싱할 필요 없이 바로 후속 처리를 할 수 있지만,
fetch는 response에 ReadableStream이라는 body를 보내주기 때문에 후속 처리를 위해서는 json 형식으로 파싱하는 과정이 필요하다.
POST 요청과 응답
이번에는 async&await으로 POST 요청을 보내봤다.
axios
POST 요청
단축 메서드로 POST 요청을 작성하였다.
const requestWithAxios = async () => {
const response = await axios.post('https://reqres.in/api/users/', {
name: 'morpheus',
job: 'leader',
});
// 후속 처리
};POST 요청에 대한 응답
서버의 응답을 찍어보면, 상태 코드가 201로 나와 새로운 리소스가 생성되었음을 알 수 있다.
또한, json 변환 과정 없이 data 속성으로 어떤 데이터를 전달받았는지 바로 확인할 수 있다.
fetch
POST 요청
const requestWithFetch = async () => {
const response = await fetch('https://reqres.in/api/users/', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'morpheus',
job: 'leader',
}),
});
// 후속 처리
};POST 요청에 대한 응답
서버의 응답을 찍어보면, 상태 코드가 201로 나와 새로운 리소스가 생성되었음을 알 수 있다.
하지만 axios와 달리, 어떤 데이터를 전달받았는지 바로 확인할 순 없다.
다음과 같이 json 형식으로 파싱해야 서버로부터 받은 데이터를 확인할 수 있다.
const data = await response.json();
console.log(data);
Reference
https://yamoo9.github.io/axios/guide/usage.html#get-요청
https://inpa.tistory.com/entry/JS-📚-AJAX-서버-요청-및-응답-fetch-api-방식#
