Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다. 서버로부터 데이터를 받아오는 방법에는 XMLHttpRequest도 있지만 Fetch API를 사용하는 방법도 있다.
둘의 차이점은 Fetch API는 Promise 방식으로 구현되어 있다는 점이다.
JSONPlaceholder 사용하기
fetch('http:// jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',FormData
파일을 업로드하는 경우는 FormData 객체를 사용한다. FormData는 HTML의 form 태그에 해당하는 form 필드와 그 값을 나타내는 일련의 키-값 쌍을 쉽게 생성할 수 있게 해주는 객체이다. 일반적인 텍스트 데이터뿐만 아니라 파일을 서버로 전송할 수 있게 해준다.
// FormData 객체 생성, FormData는 파일을 포함한 데이터를 전송할 수 있도록 해주는 객체
let formData = new FormData();
let fileField = document.querySelector('input[type="file"]'); // 사용자가 선택한 파일
formData.append('username', 'abc123'); // 텍스트 데이터
formData.append('attachment', fileField.files[0]); // 파일
fetch('url', {
method: 'POST',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', JSON.stringify(response)));
// 2개 이상의 다중 파일 서버로 전송
// let fileField = document.querySelector('input[type="file"][multiple]');
// 선택한 파일 수 만큼 반복문을 사용해서 FormData에 삽입