Section2 / Unit3 : fetch API, axios

fetch API

URL로 요청하는 것을 가능하게 해주는 API

Promise를 기반으로 동작한다

fetch()가 반환하는 프로미스 객체는 404, 500과 같은 HTTP 오류 상태를 수신해도 거부되지 않는다

fetch API 사용하기

fetch('//url 주소')
.then((response) => response.json())
.then((data) => console.log(data))

네트워크에서 JSON 파일을 가져와서 콘솔에 출력한다

응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없다.

Axios

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

fetch API와 비슷한 역할을 하는 라이브러리

-> fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있다

Axios	Fetch API
써드파티 라이브러리로 설치가 필요합니다	빌트인 API라 별도의 설치 필요 없습니다
자동으로 JSON데이터 형식으로 변환됩니다	.json() 메서드를 사용해야 합니다

특징

브라우저를 위해 XMLHttpRequests 생성

node.js를 위해 http 요청 생성

Promise API를 지원

요청 및 응답 인터셉트

요청 및 응답 데이터 변환

요청 취소

JSON 데이터 자동 변환

XSRF를 막기위한 클라이언트 사이드 지원

Axios 사용법

npm install axios

fetch API와 기본 원리는 같다

 

GET 요청

GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드

첫 번째 인자에는 url주소(필수)가 들어간다

두 번째 인자에는 요청 시 사용할 수 있는 옵션들을 설정하게 된다(필수X)

axios.get("url"[,config])

 

POST 요청

서버에게 데이터를 보내기 위해 사용되는 메서드

첫 번째 인자에는 url주소(필수)가 들어간다

두 번째 인자에는 요청 시 보낼 데이터를 설정하게 된다(필수X)

axios.post("url"[, data[, config]])