3.21 fetch API 개념

스우티 2023. 3. 21. 16:32

비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청입니다. 네트워크를 통해 이루어지는 요청은 그 형태가 다양합니다. 그중에서 URL로 요청하는 경우가 가장 흔합니다. URL로 요청하는 것을 가능하게 해 주는 API가 바로 fetch API입니다.

fetch API는

특정 URL로부터 정보를 받아오는 역할을 합니다.

이 과정이 비동기로 이루어지기 때문에, 경우에 따라 다소 시간이 걸릴 수 있습니다.

이렇게 시간이 소요되는 작업을 요구할 경우에는 blocking이 발생하면 안 되므로, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우는 경우도 있습니다.

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

let url =
  "https://koreanjson.com/posts/1"; //URL을 문자열 형태로 변수 url에 할당합니다.
fetch(url)
  .then((response) => response.json()) 
// Fetch API를 사용하여 URL에 GET 요청을 보내고, 반환된 응답(Response) 객체를 반환합니다.
// 따라서 .then() 메소드를 사용하여 Promise 체인을 연결하고, 
// 응답 객체를 JSON으로 파싱하기 위해 response.json() 메소드를 호출합니다. 
// 이렇게 하면 Promise 객체가 반환되며, 다음 .then() 메소드에서 해당 JSON 데이터를 처리할 수 있게 됩니다.

  .then((json) => console.log(json))
// 이전 then() 메소드에서 반환된 Promise 객체에서 전달받은 JSON 데이터를 출력하는 역할을 합니다.
  .catch((error) => console.log(error));
// Promise 객체의 catch 메소드를 사용하여, Promise 체인에서 발생한 모든 예외를 캐치하고, 콘솔에 에러 메시지를 출력합니다.

//결과//Promise {<pending>}
//VM777:5 {id: 1, title: '정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는 정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다.', content: '모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 모든 국민은…진다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다.', createdAt: '2019-02-24T16:17:47.000Z', updatedAt: '2019-02-24T16:17:47.000Z', …}

이 코드는 fetch API를 이용하여 서버에서 데이터를 받아와서 JSON 형태로 출력하는 코드입니다.

fetch() 메소드는 HTTP 요청을 보내고 응답을 가져오는데 사용되는 웹 API입니다.

fetch(url [, options]) 
// url: 요청을 보낼 URL을 지정합니다. 반드시 지정되어야 합니다.
// options (선택사항): 추가적인 요청 설정을 담은 객체입니다.  
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

Promise 객체를 반환하며, 네트워크 요청을 비동기적으로 처리합니다.

Fetch API에서 반환되는 Promise 객체는 HTTP 요청이 성공하면 resolve 콜백을 호출하고, 요청이 실패하면 reject 콜백을 호출합니다.

.then()과 .catch()은 JavaScript의 Promise 객체에서 사용되는 메소드입니다.

.then() 메소드는 Promise 객체가 resolve(해결) 상태가 되었을 때, 처리할 콜백 함수를 등록하는 역할을 합니다. 이때, resolve 콜백 함수의 매개변수로는 Promise 객체가 resolve된 결과값이 전달됩니다. 예를 들어, Fetch API에서 반환되는 Promise 객체에서는 HTTP 요청이 성공했을 때, then() 메소드에 등록된 콜백 함수가 실행되며, 이때 매개변수로 응답(Response) 객체가 전달됩니다.

.catch() 메소드는 Promise 객체가 reject(거부) 상태가 되었을 때, 처리할 콜백 함수를 등록하는 역할을 합니다. 이때, reject 콜백 함수의 매개변수로는 Promise 객체가 reject된 예외 객체가 전달됩니다. 예를 들어, Fetch API에서 반환되는 Promise 객체에서는 HTTP 요청이 실패했을 때, catch() 메소드에 등록된 콜백 함수가 실행되며, 이때 매개변수로 예외 객체가 전달됩니다.