<aside> 💡 Fetch에 대해서 간단하게 알아보자!!

</aside>

Fetch 기본 문법

const res = await fetch(url);

// 리스폰스 상태 코드
res.status;

// 리스폰스 헤더
res.headers;

// 리스폰스 바디
await res.json(); // JSON 문자열을 파싱해서 자바스크립트 객체로 변환
await res.text(); // 문자열을 그대로 가져옴

fetch를 이용해서 데이터를 CURD를 진행할 수 있다. fetch 함수를 이용하여 데이터를 받아올 주소를 받고

json() 메소드를 사용하여 바디의 JSON 문자열을 파싱해서 자바스크립트 객체로 변환해준다. text() 메소드는 바디의 내용을 문자열 그대로 반환해주며

대부분 body의 형식이 JSON 이지만 JSON 형식이 아닌데 json 메소드를 사용하면 파싱 오류가 난다.

Fetch 사용 예시

const res = await fetch(url);
const data = await res.json();

return data;

fetch 함수는 promise 객체로 받아오기에 await 을 붙여줘야 값을 전달 받을 수 있다. 받아온 주소의 body 에는 데이터들이 JSON 으로 실려있기에 자바스크립트 객체로 변환후

데이터를 반환해주면 된다.

URL 객체

쿼리 파라미터를 보낼 때 URL 객체를 사용할 수 있다.

const params = { offset: 10, limit: 10 };
const url = new URL('<https://learn.codeit.kr/api/color-surveys>');
Object.keys(params).forEach((key) => url.searchParams.append(key, params[key]));
const res = await fetch(url);
const data = await res.json();
console.log(data);

Fetch 옵션

다양한 옵션이 있지만 Fetch 함수를 사용하면서 부가적인 옵션들이 사용될 때가 많다.

[MDN 참조] :

fetch() global function - Web APIs | MDN