웹개발을 할 때, AJAX라는 비동기적인 통신 방법을 통해 클라이언트 쪽에서 서버에 추가 정보를 요청하여 가져올 수 있게 합니다.
fetch API는 이러한 AJAX 통신 기술의 일종으로 별도의 라이브러리를 추가하지 않더라도 최신 브라우저에 내장되어 있기 때문에, 함수를 Javascript에서 호출하는 것으로 손쉽게 사용 가능합니다.
fetch() 함수는 2개의 인자를 받습니다.
fetch(url, [options])
url: 접근하고자 하는 url
[options] : 선택 매개변수
첫번째 인자인 url은 반드시 작성을 해줘야 합니다.
자료를 요청할 서버의 주소와 요청 주소값을 정확히 작성해주어야 합니다.
두번째 인자인 [options]는 사용할 HTTP 메서드, headers, body 등을 정의합니다.
생략이 가능하고, 생략할 경우에는 default로 설정되어 있는 GET 방식으로 통신하게 되어 있습니다.
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);
})