Fetch

1. Fetch api

fetch api는 브라우저에서 서버로 http 요청을 하게 해준다.
서버에서 브라우저로 데이터를 전송할 때 promise를 사용한다.
브라우저에서 url 요청을 전송할 때 전역 스코를 가진다.

2. 기본 문법

let promise = fetch(url, [options])

• url : 접근하고자 하는 url
• options : 선택 매개변수, 메서드나 헤더 등을 지정
• options는 생략이 가능하며 생략하게 되면 get 메서드로 진행되어
  url로부터 콘텐츠가 다운로드 된다.
• fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프로미스가 반환된다.
  반환되는 프로미스는 fetch()를 호출하는 코드에서 사용된다.
  

let respons = await fetch(url, options);
let result = await response.json();

• 위에 코드는 응답 헤더와 함께 이행이 되고
  아래의 result 부분의 코드는 json 본문을 읽는다.

2-1. GET 요청

  fetch('http://naver.com/안녕하세요.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

• 네트워크에서 json 파일을 가져와서 콘솔에 출력하는 코드이다.
• api에 있는 데이터를 가져올 때 쓰이며 fetch 함수는 기본적으로
  get 방식으로 작동하기 때문에 option이 생략 가능하다.
• response(응답) 객체는 json 메서드를 제공하며 이 메서드를 호출하면
  response로부터 json 형태의 데이터를 자바스크립트 객체로 변환화여 얻어 온다.

2-2. POST 요청

 fetch("http://naver.com/post", {
	method: "POST",
    headers: {
    	"Content-Type": "application/json",
    },
    body: JSON.stringify({
    	title: "hello world",
        body: "안녕 하세요",
        userId: 1,
        }),
 }).then((response) => response.json())
   .then((data) => console.log(data))

• 데이터를 만들어 낼 때 보내는 데이터의 양이 많거나 보호해야 하는
  개인정보 같은 데이터들을 보낼 때 POST 메서드를 사용한다.
• POST를 생성하려면
  • 메서드 옵션을 POST로 지정
  • headers 옵션으로 JSON 포맷을 사용한다고 지정
  • body 옵션은 요청 전문을 JSON 포맷으로 지정