간단하게 알아보는 Fetch API

👾 Fetch API

 자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공한다. Fetch API가 제공하는 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있다.

 (이전에는 XMLHttpRequest를 사용했었다. Fetch는 더 좋은 대체제이다.)

 Fetch API는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고, CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함한다.

 fetch() 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받는다. 반환 값은 해당 요청에 대한 Response로 이행하는 Promise인데, 서버가 헤더를 포함한 응답을 하는 순간 이행한다. 이는 서버가 HTTP 오류 응답 코드로 응답해도 이행한다는 뜻이다. 선택 사항으로, 두 번째 매개변수에 init 옵션 객체를 제공할 수 있다.

 

 

✔️ Fetch 기본 문법

let promise = fetch(url, [options])

 • url 접근하고자 하는 URL

 • options 선택 매개변수로 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정할 수 있다. (default는 GET)

 • fetch() 를 호출하면 브라우저는 네트워크 요청을 보내고 프로미스 타입의 객체를 반환한다.

 

 

✔️ 기본적인 Fetch 요청

// 네트워크에서 JSON 파일을 가져와서 console에 출력
fetch('<http://example.com/movies.json>')
  .then((response) => response.json())
  .then((data) => console.log(data));

 1. 가장 단순한 형태의 fetch()는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받는다.

 2. 응답은 Response 객체로 표현되며, HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다. 직접 JSON 응답 본문을 받을 수는 없다.

 3. JSON 본문 콘텐츠를 추출하기 위해서는 json() 메서드를 호출한다.

 → json()은 Response 객체에서 JSON 형식의 데이터를 추출하고, 이를 JavaScript 객체로 변환한다. json()은 Response 객체에 대해 비동기적으로 호출되며, 프로미스를 반환한다.

 

 

👩🏻‍💻 example

fetch("URL") 
  .then((res) => {
    console.log(res) // Response 객체 ("URL"을 url로 받음)
    return res.json()
  })
  .then((data) => {
    console.log(data) // data (JSON 본문 컨텐츠)
  })
  .catch((error) => console.log(error))

 

 

---

 

📌 더 자세한 부분은 MDN을 참고하면 좋을 것 같다 :-)

Fetch API - Web API | MDN

 

---

 

💬 Fetch API를 사용해 2개의 요청의 결과를 하나의 객체로 합치는 과제를 했었다. (Chaning과 Promise.all, async/await를 사용)

 이 과제를 하면서 fetch 뿐만 아니라 fetch로 url을 받은 후 promise와 then을 어떻게 사용하는지도 확실하게 알 수 있었다. 

 (아래 글의 ⭐️ 과제. Part3 - fetch API 참고)

Section2 Unit3 JS/Node 비동기 - fetchAPI

---

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊