Fetch API

## Fetch API

Fetch API는 HTTP를 구성하는 요청(request), 응답(response) 그리고 헤더(Headers)의 요소를 Javascript에서 조작할 수 있는 인터페이스를 제공합니다.

이전에는 XMLHttpRequest를 사용하여 jQuery와 같은 라이브러리의 도움을 받았지만, 이제는 Fetch API의 전역 fetch() 메서드 하나면 쉽게 비동기적으로 가져올 수 있습니다. 

- 🔗 [MDN Fetch API](https://developer.mozilla.org/ko/docs/Web/API/Fetch_API)

**시작하기 전에**

원격 데이터를 호출하기 위해 JSONPlaceholder라는 페이크(Fake) api 사이트를 이용할 예정입니다. 무료로 사용할 수 있어 테스트 용도로 사용하기 좋습니다. 

- [JSON Placeholder Guide](https://jsonplaceholder.typicode.com/guide/)

nodejs 환경에서는 17.5 버전 이후에 Fetch API를 지원합니다. 현재(2022년 10월)는 지원하지 않는 nodejs 버전이 많으니 아래 예제들은 브라우저의 개발자 도구 환경에서 실행하시기 바랍니다. 
### 기본 사용법

fetch 메서드는 promise로 동작합니다. promise가 익숙하지 않으신 분은 promise 영상을 시청하시기 바랍니다. 
```js
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));
```
### 옵션 추가하기

두번째 파라미터로 옵션을 설정하여 호출 할 수 있습니다. 
```js
fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'GET', 
    headers: {
      'Content-Type': 'application/json',
    }
  }).then((response) => response.json())
  .then((json) => console.log(json));
```
아래 예제와 같이 'body' 부부분에 데이터를 담아 서버에 전송할 수 도 있습니다. 
```js
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));
```
### 파일 업로드
```js
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData,
})
.then((response) => response.json())
.then((result) => {
  console.log('성공:', result);
})
.catch((error) => {
  console.error('실패:', error);
});
```
여러개의 파일 업로드도 가능합니다. 

```js
const formData = new FormData();
const photos = document.querySelector('input[type="file"][multiple]');

formData.append('title', '제주도 수학여행');
for (let i = 0; i < photos.files.length; i++) {
  formData.append(`photos_${i}`, photos.files[i]);
}

fetch('https://example.com/posts', {
  method: 'POST',
  body: formData,
})
.then((response) => response.json())
.then((result) => {
  console.log('성공:', result);
})
.catch((error) => {
  console.error('실패:', error);
});
```
### fetch() 메서드
 https://developer.mozilla.org/en-US/docs/Web/API/fetch