[JAY⌨️JS] 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 API 요청을 위한 열쇠 fetch() 메서드

 

 

 1️⃣ fetch API 란?

• API(애플리케이션 프로그래밍 인터페이스)가 등장하고 애플리케이션을 데이터베이스와 서버에 연결해야 할 필요성이 커짐에 따라 현재 HTTP 요청의 중요성은 아무리 강조해도 지나치지 않게 되었다.
• 자바스크립트에는 이러한 요청을 수행할 수 있는 매우 편리한 내장 메서드인 fetch() 가 있다.
• fetch()는 HTTP 요청에 사용되는 Promise 기반 API 이며,  이전의 XMLHttpRequest와 같은 복잡한 네트워크 요청 절차를 사용하기 쉽도록 개선한 문법이다.

 

 

 

 2️⃣ fetch API의 주요 장점

• Fetch는 promise 기반으로, 비동기 작업을 사용하고 관리하는 것을 쉽게 해준다.
• 간단하고 깔끔한 구문을 제공하므로 코드의 가독성과 유지 관리가 더욱 쉬워진다.
• catch 메서드를 통해 효율적이고 간소화된 오류 처리 메커니즘을 제공한다.
• IE를 제외한 모든 최신 브라우저와 호환된다. IE의 경우 호환을 위해 폴리필 사용.
• 메서드, 헤더, 본문 콘텐츠 등 요청 및 응답의 세부 사항을 높은 수준으로 제어할 수 있다.

 

 

 

 3️⃣ Promise 'then'을 사용한 fetch()

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

1. fetch메서드를 활용해서 API를 호출한다. (ex. https://api.example.com/data')
2. API를 요청한 후 이행(resolved)이 되면 response promise를 반환.
3. response promise를 json 형식으로 변환.
4. promise가 성공적으로 이행(resolved)되면 콘솔에 로그를 찍어서 확인 가능.
5. 어떤 시점에서 오류가 발생하면 해당 오류에 대한 메시지를 출력.

 

 

API 호출에 대한 응답을 얻기 위한 메서드

response.text()  응답을 텍스트 형태로 반환
response.json()  응답을 파싱해 JSON 객체로 변경
response.formData()  응답을 FormData 객체 형태로 반환
response.blob()  응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환
response.arrayBuffer()  응답을 ArrayBuffer(바이너리 데이터를 로우 레벨로 표현한 것) 형태로 반환

 

 

 

4️⃣ async/await를 이용한 fetch()

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}
fetchData();

1. promise .then 메서드보다 더욱 깔끔하게 fetch API를 호출할 수 있는 설탕 문법으로 async/await을 활용할 수 있다.
2. 함수 앞에 async를 붙이면 해당 함수는 항상 promise를 반환하고,
   promise가 아닌 것은 promise로 값을 감싸서 이행(resolved) 상태의 promise가 반환되도록 한다.
3. await는 async 함수 안에서만 동작하며, promise가 처리될 때까지 기다리며 동기적으로 실행된다.
4. 일반적으로 fetch 요청에서 응답을 await하고, 응답을 JSON 형식으로 변환하는 await 하는 두 개의 await 호출로 구성.
5. 어떤 시점에서 오류가 발생하면 해당 오류에 대한 메시지를 출력하기 위해 try/catch 문을 활용해서 예외처리

 

 

 

5️⃣ fetch() 사용 시 예외 처리

fetch('https://api.example.com/data')
  .then(response => {
    // response.ok – 응답 상태가 200과 299 사이에 있는 경우 true
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))

• Fetch로 작업할 때 주의해야 할 중요한 점은 예외를 처리하는 방식!
• XMLHttpRequest와 같은 이전 API와 달리 fetch()는 네트워크 오류가 발생했을 때에만 Promise 거부(rejects) 값을 반환.
•  HTTP 404 또는 500 오류가 발생해도 fetch는 rejects 처리되지 않기 때문에 오류에 대해 명시적인 예외 처리를 해야 한다.

 

response 객체의 property

response.status 응답의 HTTP 코드
response.ok 응답 상태가 200과 299 사이에 있는 경우 
trueresponse.headers 맵과 유사한 형태의 HTTP 헤더

 

 

 

 

🙋🏻‍♀️ 요약!

• fetch()는 HTTP 요청에 사용되는 Promise 기반 API 이며, 복잡한 네트워크 요청 절차를 사용하기 쉽도록 개선한 문법.
• promise를 기반으로 한 .then() 메서드와 async/await 통해 fetch API 요청 가능.
• async/await을 통해 fetch() 메서드를 실행하는 경우 일반적인 fetch 요청은 두 개의 await 호출로 구성.
• Fetch로 작업할 때 예외처리를 꼭 해줄 것!