네트워크 요청 2 - Fetch API와 Axios

1) Fetch API

Fetch API는 서버와 통신하기 위해 사용하는 XMLHttpRequest의 대체제이다.

XMLHttpRequest보다 훨씬 사용법이 간단하고 서비스 워커 등 다른 기술을 쓸 때 손쉽게 엮어 사용할 수 있다.

fetch()는 구식 브라우저에서는 돌아가지 않는다.

• fetch()
  • fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스는 반환된다.
  • 이 프라미스를 사용해서 fetch()를 호출한다.

// url – 접근하고자 하는 URL
// options – 선택 매개변수, method나 header 등이 여기에 들어간다.
let promise = fetch(url, [options])

• fetch() 사용법

get

const callSomething = async () => {
	let response = await fetch('http://localhost:5001/sleep_times');

	console.log(response);
}

post

const callSomething = async () => {
	let data = {
      "id": 6,
      "day": "일", 
		"sleep_time": "10:00"
    },
	let response = await fetch('http://localhost:포트번호/엔드포인트', {
	  method: 'POST',
	  headers: {
	    'Content-Type': 'application/json;charset=utf-8'
	  },
	  body: JSON.stringify(data)
	});
		console.log(response);
}

2) Axios

XMLHttpRequest를 베이스로 한 프로미스 기반 HTTP 클라이언트 라이브러리이다.

악시오스는 node 런타임과 브라우저 양측에서 모두 돌아간다.

시오스는 통신 방법 중 가장 기능이 많은 통신방법이다.

(1) 설치하기

npm install axios

(2) config로 GET 요청하기

axios({
  method: 'get',
  url: 'http://localhost:포트번호/엔드포인트',
})
  .then((response) => {
			console.log(response);
  });

(3) 요청 메서드로 GET 요청해보기

axios.get("http://localhost:포트번호/엔드포인트");

(4) 요청 메서드로 POST 요청해보기

let data = {
	id: 6,
	day: "일", 
	sleep_time: "10:00"
};

axios.post("http://localhost:포트번호/엔드포인트", data);