🔍 fetch API
fetch API는 다양한 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경 내용 가져오기 등 많은 일을
페이지 새로고침 없이 수행하는 역할을 한다.
fetch API
🔍 사용법
fetch()함수는 첫번째 인자로 URL을, 두번째 인자로 Option 객체를 받는다.
fetch(url, [options])
- url : 접근하고자 하는 url
- [option] : 선택 매개변수(method나 header 지정가능)
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를 반환하는데 이 Promise가 내장 클래스 Response의 인스턴스와 함께 이행된다
fetch(url, [options])
.then((response) => reponse.json()) // get이나 post로 불러온 데이터를 JSON으로 파싱해줌
.catch((err) => console.log("err:", err))Response에는 Promise를 기반ㄴ으로 하는 아래와 같은 메소드가 존재한다.
- response.text() : 응답을 읽고 텍스트를 반환
- response.json() : 응답을 JSON 형태로 파싱
- response.blob() : 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 변환
💡 response 사용 예시
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)) //오류 발생시 오류를 담아서 보여줌