fetch API

---

fetch API

fetch api는 비동기 http 요청을 좀 더 편리하게 사용하게 하는 API이며 XMLHTTPRequest를 대채한다. fetch api는 Promise 기반으로 동작한다.

fetch는 response를 응답하며 response를 바로 사용할 수 없다. 응답받은 respone는 JSON 형식이라 response.json()으로 객체로 변환시켜줘야 사용할 수 있다.

---

fetch API 사용 방법

fetch() 함수는 주어진 URL에 대한 HTTP 요청을 보낸다.

이 함수는 Promise를 반환하며, 이 Promise는 서버로부터 응답이 도착했을 때 resolve되고 오류가 발생하면 reject가 된다.

fetch('https://api.example.com/data')
    .then(response => response.json()) // 응답 데이터 JSON을 객체로 변환
    .then(data => console.log(data)); // 여기서 data는 JavaScript 객체
    .catch(error => console.error(error));

---

Response 객체

Response의 메소드

fetch()가 반환하는 Promise가 resolve될 때, 그 값은 Response 객체다. 이 객체에는 HTTP 응답에 대한 여러 정보와 메소드들이 포함되어 있다.

• ok : HTTP 상태 코드(status)가 성공 상태(200~299)일 경우 true를 반환합니다.
• status : HTTP 상태 코드를 반환합니다.
• statusText : HTTP 상태 메시지를 반환합니다.
• headers : Headers 객체를 반환합니다. 이 객체를 통해 응답 헤더들을 조회할 수 있습니다.

Response 객체로 요청 성공 확인

fetch는 HTTP error가 발생하더라도 reject가 되지 않는다. 예를 들어 400, 404, 500 에러를 반환받아도 reject가 되지 않고 resolve된다.

네트워크 에러나 요청이 완료되지 못한 경우에만 reject가 된다.

그래서 response 데이터에 포함된 statue, ok 등으로 완벽하게 성공했는지 한 번더 확인을 해주고 데이터를 다뤄야한다.

fetch('https://api.example.com/data')
    .then(response => {
        if(response.ok && response.status === 200) {
            return response.json();
        }
        throw new Error("요청 실패");
    })
    .then(data => {
    console.log(data); // 여기서 data는 JavaScript 객체
    })
    .catch(error => console.error(error));

---

Request 설정

fetch의 두 번째 인자로 옵션을 줄 수 있다.

• method: GET, POST, PUT, DELETE
• headers : 헤더 객체에 토큰 같은 값을 넣을 수 있다.
• body : POST의 경우에는 BODY 객체에 담아야 한다.

fetch('https://api.example.com/data', {
  method: 'POST', // or 'PUT, GET, DELETE'
  headers: {
    'Content-Type': 'application/json',
    // 'Authorization': 'Bearer my-token',
    // for file upload
    // 'Content-Type': 'multipart/form-data'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})

---