TIL 8)Fetch API

0. 시작하기

fetch api는 특정 url로부터 정보를 받아오는 역할을 한다. 이때 데이터를 받아올 때 페이지를 새로고침 없이 수행한다.

1. fetch 사용법

fetch 함수는 첫번째 인자로 url, 두번째 인자로 option 객체를 전달받는다.

url : 접근하고자 하는 url
option : 선택 매개변수

option의 항목은 다음과 같다.

• method : 사용할 메소드를 선택 ('GET', 'POST', 'PUT', 'DELETE' )
• headers : 헤더에 전달할 값 ( { 'content-Type': 'application/json' } )
• body : 바디에 전달할 값 ( JSON.springfy(data) )
• mode : 'cors' 등의 값을 설정 (cors, no-cors, same-origin)
• credentials : 자격 증명을 위한 옵션 설정 (include, same-origin, omit)(default = same-origin)
• cache : 캐쉬 사용 여부 (no-cache, reload, force-cache, only-if-cached)

fetch api는 promise를 반환하므로 작업의 성공 유무에 따라 결과가 결정된다.

여기서 주의할 점이 fetch할떄는 두 단계를 거쳐야 한다.
1. 올바른 url로 요청 보내기
2. 응답에 따라 json() 해주기

fetch(url, [options])
.then((response) => reponse.json()) // get이나 post로 불러온 데이터를 JSON으로 파싱해줌
.then((x) => console.log(JSON.stringify(x)) // 파싱된 데이터를 x로 받아와서 x를 stringify해줌
.catch((err) => console.log("err:", err)) //오류 발생시 오류를 담아서 보여줌