스파르타 AI-8기 TIL(1/16)-TeamProject

fetch 공부

1. Fetch API란?
Fetch API는 JavaScript 내장 함수로, 네트워크 요청을 쉽게 처리할 수 있는 인터페이스를 제공한다.
XMLHttpRequest와 비교하여 간결하고 사용이 쉽다.
2. 주요 특징
Promise 기반
JSON 및 기타 데이터 형식 지원
간결한 코드로 네트워크 요청 및 응답 처리

Promise란?

fetch에서 Promise는 비동기 작업의 결과를 나타내는 객체입니다. fetch 함수는 네트워크 요청을 보내고, 요청이 완료된 후 응답을 처리할 수 있도록 Promise를 반환합니다. 이를 통해 요청의 성공 여부에 따라 적절한 처리를 할 수 있습니다.

Promise란?
Promise는 비동기 작업이 완료되거나 실패했을 때 결과 값을 처리할 수 있는 JavaScript 객체입니다. 세 가지 상태를 가질 수 있습니다:
pending (대기 중): 작업이 아직 완료되지 않은 초기 상태.
fulfilled (이행됨): 작업이 성공적으로 완료되어 결과 값을 반환한 상태.
rejected (실패됨): 작업이 실패하고 에러 이유를 반환한 상태.

fetch와 Promise의 관계
fetch는 비동기적으로 동작하기 때문에, 실행되자마자 네트워크 요청이 완료되지 않습니다. 대신, Promise 객체를 반환하고, 이 객체를 통해 요청이 완료되었을 때(성공/실패 여부에 따라) 후속 작업을 정의할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => {
    // 응답이 성공적으로 도착했을 때 실행
    console.log('응답 객체:', response);
    return response.json(); // JSON 데이터를 파싱
  })
  .then(data => {
    // 파싱된 데이터를 처리
    console.log('데이터:', data);
  })
  .catch(error => {
    // 요청 실패 시 실행
    console.error('에러 발생:', error);
  });

코드 설명
fetch(url): Promise를 반환하며, 네트워크 요청이 성공하면 response 객체를 반환.
.then(): 요청이 성공했을 때 실행할 작업을 정의.
response.json(): 응답 데이터를 JSON으로 변환하는 또 다른 Promise를 반환.
또 다른 .then(): JSON 데이터가 파싱된 후 실행할 작업을 정의.
.catch(): 요청이 실패했을 때 실행할 작업을 정의.

Promise의 주요 메서드
then(): 성공했을 때 실행할 작업 정의.
catch(): 실패했을 때 실행할 작업 정의.
finally(): 성공/실패와 상관없이 항상 실행할 작업 정의.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log('데이터:', data))
  .catch(error => console.error('에러:', error))
  .finally(() => console.log('요청 완료'));

요약
Promise는 비동기 작업을 처리하기 위한 객체.
fetch는 네트워크 요청을 보내고 Promise를 반환.
then, catch, finally를 사용해 결과를 처리.