fetch() 함수를 알아보자

fetch() 함수가 뭔데?

클라이언트단에서 비동기로 네트워크를 통해 api를 호출해 리소스를 요청하고 응답받을 수 있다.
예전엔 request,axios,jQuery같은 라이브러리를 이용해서 http를 요청하고 응답받았지만 요즘은 브라우저에서 기본으로 fetch()함수를 지원하기 때문에 상대적으로 더 좋은 대체제인 fetch()함수를 사용한다고 합니다.
참고로 fetch는 브라우저에서 제공하는 window객체의 내장객체 이기 때문에 당연하게 node.js같은 환경에서는 사용이 불가하다.
또 익스플로워 같은 구식 브라우저에서 동작하지않을 수 있다.

기본 문법
```
fetch ('api주소', {옵션 객체})
//기본동작은 get방식으로 동작한다.
```
fetch()의 리턴값은 Promise이여서 응답객체에 접근할려면 .then을 이용한다.

Get 방식 api호출
```
fetch('https://jsonplaceholder.typicode.com/posts/1')
//then으로 객체에 접근하여 json()함수를 이용해 json 객체로 변경
.then((response) => response.json())
.then((json) => console.log(json));
```
👇 Output
```
{
id: 1,
title: '...',
body: '...',
userId: 1
}
```
- get방식 api호출은 요청body를 받지 않아 2번째 인자 옵션 없이 첫번쩨인자인 api주소만 넣어 사용 가능하다.
  코드출처

Post 방식 api호출

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

👇 Output

 {
  id: 101,
  title: 'foo',
  body: 'bar',
  userId: 1
}

get 방식 이외에는 api호출을 위해서는 "method: 'POST'" 로 동작방식을 명시해준다.
body는 문자열로 작성해주어야하기때문에 JSON.stringif() 함수를이용해서 문자열로 변환한다.
headers: 속성으로 json으로 명시하여 전송코드가 json임을 서버에 알려주는 역할을 한다.

코드출처

[JavaScript] fetch() 함수란?

fetch() 함수를 알아보자

fetch() 함수가 뭔데?

기본 문법

Get 방식 api호출

Post 방식 api호출