fetch?

fetch API란?

웹개발을 할 때, AJAX라는 비동기적인 통신 방법을 통해 클라이언트 쪽에서 서버에 추가 정보를 요청하여 가져올 수 있게 합니다.
fetch API는 이러한 AJAX 통신 기술의 일종으로 별도의 라이브러리를 추가하지 않더라도 최신 브라우저에 내장되어 있기 때문에, 함수를 Javascript에서 호출하는 것으로 손쉽게 사용 가능합니다.

fetch() 사용법

fetch() 함수는 2개의 인자를 받습니다.

fetch(url, [options])

url: 접근하고자 하는 url
[options] : 선택 매개변수

첫번째 인자인 url은 반드시 작성을 해줘야 합니다.
자료를 요청할 서버의 주소와 요청 주소값을 정확히 작성해주어야 합니다.
두번째 인자인 [options]는 사용할 HTTP 메서드, headers, body 등을 정의합니다.
생략이 가능하고, 생략할 경우에는 default로 설정되어 있는 GET 방식으로 통신하게 되어 있습니다.

fetch 사용 예제

GET

fetch('URL')  // url 입력
	.then(res => res.json()) // 응답 결과를 json으로 파싱
    .then(data => {
    	console.log(data); // 응답 결과를 console 창에 출력
    })
    .catch(err => { // 오류 발생 시 오류를 담아서 보여줌
    	console.log(err);
    })

POST

let formData = new FormData();
formData.append('key', value); // key-value(키-값)의 형태로 데이터 추가

fetch('URL', {
	method: 'post',
    body: formData  // 전송할 데이터 body에 추가
})
	.then(res => res.json()) // 응답 결과를 json으로 파싱
    .then(data => { 
    	console.log(data);
    })
    .catch(err => {
    	console.log(err);
    })