[JavaScript] Fetch API
자바스크립트의 fetch 함수는 비동기 통신 API로써 서버에 네트워크 요청을 보내 새로운 정보를 받아올 수 있다. ES6부터 지원하며, 가독성이 매우 뛰어난 장점이 있다. 이곳을 클릭하면 {"message": "hello world"}라는 JSON 데이터 화면이 나온다. fetch API를 이용해 이 JSON을 가져와 보자.
기본 형태
fetch API의 기본 형태는 아래와 같다.
fetch(url, [options])
.then((res) => res.json())
.then((res) => {
// data를 응답 받은 후 로직
});
url에는 접근하고자 경로를 넣으면 된다.options에는method나header등을 지정하여 요청할 수 있다.options에 아무값도 넘기지 않으면 요청은 GET 메서드로 진행된다.
화살표 함수를 함수 선언식으로 변경하면 아래와 같다.
fetch(url, [options])
.then(function(res) {
return res.json();
})
.then(function(res) {
// data를 응답 받은 후 로직
});
위에서 언급한 주소를 입력하여 JSON 데이터를 잘 가져오는지 확인해 본다.
요청 하기
fetch('https://recordboy.github.io/ui/dummy/data.json')
.then(function(res) {
// Response Object
console.log(res);
// 응답값 JSON 형태로 얻기
return res.json();
})
.then(function(res) {
// 리턴 받은 JSON
console.log(res);
});
- 응답값은 첫번째
then에 지정된 함수의res에 담겨지며, 이 값은 http 응답값을 가지고 있는Response Object이다. - 첫번째
then의 응답값을 JSON 형태로 얻기 위해Response Object의json()함수를 호출하여 값을 리턴한다. - 두번째
then에서 응답 받은 JSON을 확인할 수 있다.