[JavaScript] Fetch API 를 알아보자

🔊 Fetch

자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있는데 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기, 등
fetch 메서드를 통해
이 모든 것들은 페이지 새로 고침 없이도 가능한 비동기적 으로 서버를 가져올 수 있다.

• Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다.
• Fetch API가 제공하는 전역 fetch() (en-US) 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있다.

💡 키워드

let promise = fetch(url, [options]) 

// url – 접근하고자 하는 URL
//options – 선택 매개변수, method나 header 등을 지정할 수 있음

• fetch를 이용하여 서버정보를 받아.json() 메서드를 통해 파싱을 한다
  즉 자바스크립트 언어로 서버 body를 추출해올때 사용한다.

let url = " url.주소 ";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

추출해온 정보는 스트링 형식인데, 이것을 객체로 바꾸기 위하여 JSON.parse() 를 사용한다.

let url = " url.주소 ";
fetch(url)
  .then((response) => response.json())
  .then((json) => JSON.parse(json))
  .then((json) => console.log(json))
  .catch((error) => console.log(error));