https://developer.mozilla.org/ko/docs/Web/API/Window/fetch#body
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

서버 단에서 대신 API를 호출해주기보다는 클라이언트 단에서 직접 API를 호출할 때 사용된다.
브라우저에서 fetch() 함수를 지원하기 전에는 request나 axios, jQuery와 같은 라이브러리를 사용하여 클라이언트가 HTTP 요청을 하고 응답을 받았지만, 이제는 원격 API를 간편하게 호출할 수 있도록 브라우저에서 fetch() 함수를 제공하고 있다.

fetch는 가져오다라는 뜻처럼, 서버에서 데이터를 가져오는 역할을 한다.
fetch를 사용하면 자바스크립트는 즉시 Promise 객체를 반환하고, 이는 데이터 요청은 잘 접수되었으니 준비되면 알려주겠다는 약속이다.
이제 이 약속이 이행됐을 때 무엇을 할지 .then() 메서드에 정해주면 된다.

Promise

myFirstPromise를 선언하면 생성자함수가 실행되고 그 안에 콜백함수가 실행돼서 setTimeout이 실행되고, setTimeout의 콜백함수는 web API에 위임을 함. 이제 resolve(“Success”)는 독립적으로 진행함.

그럼 promise 생성자함수는 종료되지. 그러면서 객체 실행됨.
이때 promise안의 콜백함수가 종료되어서 반환됨. new Promise 객체가 반환. 콜백함수에 resolve 함수는 아직 실행 안된상태로 존재

myFirstPromise가 결과값 받은 상태야. 아직 fulfilled 안된 상태야. pending상태.
myFirstPromise.then은 동기함수야. 그냥 반환 돼. 만약 또 .then이 있으면 얘는 또 바로 실행 되어서 콜백 등록함. 여튼, 애는 파라미터를 받아서 promise 객체 안에 콜백을 등록해주는 함수임
then이 콜백햠수 등록해주면 얘는 끝나.

아직 실행안된거는 setTimeout으로 등록했던 콜백함수랑 then으로 등록했던 콜백함수가 실행 안됨.

그럼 언제 콘솔이 실행될까? 1초뒤에 setTimeout의 콜백함수가 실행되면 그 안에서 이제 resolve를 통해서 promise를 fulfilled로 만들어주면 promise 객체 안에서 야 fulfilled 됐다. 그러니까 콜백함수 가져와서 파라미터 주고서 실행되는거.

fetch()

fetch() 함수는 첫번째 인자로 취득하려는 Resource, 두번째 인자로 Options 객체를 받고, Promise 타입의 객체를 반환한다.

fetch() 메서드의 매개변수는 Request() 생성자와 동일

반환된 객체는
1. API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고
2. 실패했을 경우에는 예외(error) 객체를 reject함

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

resource
취득하려는 리소스를 정의한다.

• 취득하려는 리소스의 URL을 제공하는 문자열 또는 URL처럼 문자열 변환자를 포함한 객체.
• Request 객체.

options(Optional)

• 요청에 적용하고자 하는 사용자 지정 설정을 포함하는 객체
• method
  - GET, POST 등 요청 메서드
• headers
  - 요청에 추가하고자 하는 헤더들
  • Headers 객체에 넣어 제공할 수도 있고, String 값들을 가진 객체 리터럴로 제공해도 됨
• body
  - 요청에 추가하고자 하는 본문
• 자세한 사항들은 여기 참고

GET 호출

JSON Placeholder라는 인터넷에 공개된 API를 사용해서 예제 코드를 작성

fetch() 함수는 디폴트로 GET 방식으로 작동하고 GET 방식은 요청 전문을 받지 않기 때문에 옵션 인자가 필요가 없다.

fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) =>
  console.log(response)
);

응답 객체의 응답 상태가 200 OK

대부분의 REST API들은 JSON 형태의 데이터를 응답하기 때문에, 응답(response) 객체는 json() 메서드를 제공한다.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log('에러 발생', error));

console.log('이 코드는 fetch 결과와 상관없이 바로 실행됨.');

첫 번째 then 에서는 서버 응답은 왔지만, 아직 우리가 쓸 수 있는 데이터가 아니다.
JSON 데이터로 바꿔주는 작업이 필요하므로 response.json()을 이용하여 응답을 JSON으로 바꿔준다.
이 또한 시간이 걸릴 수 있으므로 Promise를 준다

이후, 두 번째 then에서 사용할 수 있는 실제 데이터를 받는다.

중간에 문제가 생기면 .catch()가 실행된다.

코드 실행 흐름

1. fetch(...)가 실행되자마자 자바스크립트는 기다리지 않고 바로 맨 아래의 console.log('이 코드는...')를 실행 (비동기)
2. 동시에 백그라운드에서는 서버에 데이터를 요청
3. 서버에서 응답(response)이 오면, 첫 번째 .then() 이 실행
4. response.json()으로 데이터를 쓸모있는 형태(JSON)로 바꾸는 작업을 요청
5. JSON 변환이 끝나면, 두 번째 .then() 이 실행되어 최종 데이터를 사용할 수 있게 됨
6. 만약 1~5번 과정 중 어디선가 네트워크 오류 등이 발생하면 .catch() 가 실행됨

POST 호출

원격 API에서 관리하고 있는 데이터를 생성해야 한다면 요청 전문을 포함할 수 있는 POST 방식의 HTTP 통신이 필요하다.

1. method 옵션을 POST로 지정해주고
2. headers 옵션으로 JSON 포맷을 사용한다고 알려주고
3. 요청 전문을 JSON 포맷으로 직렬화화여 body 옵션에 설정해준다.

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "seha",
    body: "Hi, I'm seha",
    userId: 1,
  }),
}).then((response) => console.log(response));

응답 코드 201 Created

응답 객체의 json() 메서드를 호출하면 응답 전문을 객체 형태로 얻을 수 있다.

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "seha",
    body: "Hi, I'm seha",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

PUT 호출

원격 API에서 관리하는 데이터의 수정
POST 방식과 비슷하다

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "sehaa",
    body: "Hi, I'm seha",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

DELETE 호출

보낼 데이터가 없기 때문에, headers와 body 옵션이 필요가 없다.

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data));