fetch api

fetch api

• 비동기 http 요청을 좀 더 쓰기 편하게 해주는 api
• XMLHTTPRequest을 대체한다.
• Promise 기반으로 동작한다.

// json 데이터 요청
fetch('https://kdt.roto.codes/todos') //
  .then(res => {
    return res.json(); // .json()의 결과도 프로미스이다.
  	// return res.text(); // .text()의 결과도 프로미스이다.
  })
  .then(data => {
    console.log(data);
  });

fetch의 기본 응답 결과는 Response 객체이다. json으로 바꾸거나 text로 바꾸는 등의 처리를 해줘야한다.

// 이미지 데이터 요청
const $image = document.createElement('img');
const imageURL = 'https://indistreet.com/_next/image...';

fetch(imageURL) //
  .then(res => res.blob())
  .then(blob => {
    console.log(blob);
  
    const objectURL = URL.createObjectURL(blob);
    console.log(objectURL);
  
    $image.src = objectURL;
    document.querySelector('body').append($image);
	});

response.blob()은 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환한다.

주로 이미지 데이터를 처리할 때 사용한다.

fetch사용시 HTTP 에러

fetch는 HTTP 에러가 발생하더라도 reject 되지 않는다.

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

그러므로 서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지므로, response의 status code나 ok를 체크해주는 것이 좋다.

HTTP 에러 예제

fetch('https://kdt.roto.codes/undefined-api') // 존재하지 않는 URL
        .then(res => {
          return res.json();
        })
        .then(data => {
          console.log(data);
        })
        .catch(e => {
          console.log(e);
        });

존재하지 않는 URL의 Reponse 결과는 Not Found이다. (이는 명백한 HTTP 에러이다.)

Not Found 를 json으로 변환하고 출력하면 Unexpected token N in JSON at Position 0 라는 것이 출력된다.

catch 가 존재하지만 HTTP 에러는 reject되지 않았기 때문에 then으로 넘어간 것이다.

HTTP 에러 해결

fetch('https://kdt.roto.codes/undefined-api') //
        .then(res => {
          if (res.ok) {
            return res.json();
          }
          throw new Error('HTTP 요청 에러!');
        })
        .then(data => {
          console.log(data);
        })
        .catch(e => {
          console.log(e);
        });

간단하게 res.ok 를 확인하여 에러를 뱉어주는 방식으로 해결할 수 있다.

주의!

res.ok는 status가 200~299 사이인 경우 true가 된다.

따라서 디테일한 예외처리를 고려해봐야 한다.

fetch에 옵션주기

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

const headers = new Headers()

headers.append('x-auth-token', 'TOKEN')

fetch('https://kdt.roto.codes/product', {
  method: 'POST',
  headers,
  body: JSON.stringfy(product)
})