0. 주제 선정하게 된 배경 :
fetch가 필요하게 된건
스터디 프로젝트에서 백엔드에 데이터(영화리스트)를 요청하고 받아와서 리스트를 뿌려주기 위해서다.
1. 제대로 알고 넘어가기
1-1. 사용법
fetch('URL'[, options]) // ----------> Promise를 반환
.then(response => response.json) // ----------> 비동기 작업이 완료될때까지 대기하고 처리함
.then(data => data를 가지고 필요한 작업하기)
.catch(error => error를 가지고 작업하기)options : 선택사항으로, 메서드 (GET,POST 등), 헤더, 요청본문, 인증 정보등을 지정할 수 있음
(기본적으로 GET 요청을 수행함)
1-2. 개념
fetch API는 웹 브라우저에서 제공되는 "내장" API임
네이티브하게 브라우저에서 HTTP 요청을 보내고 응답을 처리할 수 있음
일반적으로 웹 API를 호출하거나, 서버로부터 데이터를 가져오는데 사용
HTTP :
인터넷 상에서 데이터를 주고받는 데 사용되는 표준 프로토콜(컴퓨터 네트워크에서 통신을 위한 규약이나 규칙의 집합)
예를 들어, HTML, CSS, IMAGE, Javascript 파일 등을 전송하는데 사용
ㄴ 구성 : 요청 메서드(GET,POST,PUT,DELETE), 응답 상태 코드, 헤더, 본문(body)
1) 작동 : 비동기적으로 처리하고 Promise를 반환
2) 응답(반환) :
Promise(성공 / 실패)를 반환함
ㄴ 요청이 성공하면 Promise가 성공 상태가 되고, 요청이 실패하면 Promise가 실패 상태가 됨3) 제공 :
응답객체(Response) OR 오류
ㄴ Promise가 성공 상태면 "응답 객체"를 전달, Promise가 실패 상태가 되면 "오류" 전달Response 객체가 주로 사용하는 메서드는 json()으로,
응답을 JSON으로 파싱해줌
결론 : fetch는 비동기함수인데 반환해주는 프로미스를 동기적으로 처리하기 위해서 then 메서드를 사용
2. 적용해보기
삐약