[JavaScript] fetch api를 사용해서 ajax 통신하기

안녕하세요 :)

 

오늘은 브라우저에서 제공하는 fetch API 를 사용해서 서버와 통신하는 기능을 실습해 보겠습니다.

 

 

fetch API 란?

웹개발을 할때, AJAX 라는 비동기적인 통신 방법을 통해 클라이언트 쪽에서 서버에 추가 정보를 요청하여 가져올수 있게 합니다.

fetch API는그런 AJAX 통신 기술의 일종으로 별도의 라이브러리를 추가하지 않더라도 최신 브라우저에 내장되어 있기 때문에, 함수를 JavaScript에서 호출하는 것으로 손쉽게 사용 가능합니다.

 

 

fetch() 사용법

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

 

fetch(url, [options])

1. url (필수) : 접근하고자 하는 url
2. [options] : 선택 매개변수

 

첫번째 인자인 url 은 반드시 작성을 해줘야 합니다. 자료를 요청할 서버의 주소와 요청 주소값을 정확히 작성해주어야 합니다.

두번째 인자인 [options]는 사용할 HTTP 메서드, headers, body 등을 정의합니다. 생략이 가능하고, 생략할 경우에는 default 로 설정되어있는 GET 방식으로 통신하게 되어 있습니다.

[options]에 대한 자세한 설명은 다음 링크에서 확인 가능합니다.

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

 

fetch 사용 예제

본 글에서는 GET과 POST 메서드를 사용했을 때에 대해서만 보여드리도록 하겠습니다.

 

예제에도 코드가 존재하긴 하지만,

좀더 손쉽게 사용가능한 방법으로 스틱코드 extension을 IDE에서 사용하신다면,

해당 링크의 포스트 글을 즐겨찾기 하시는 것으로 손쉽게 코드를 사용하실 수 있습니다.

https://stickode.com/detail.html?no=2707

스틱코드

GET

fetch('TARGET URL') // url 입력, GET메서드임
    .then(res => res.json())  //응답 결과를 json으로 파싱
    .then(data => { 
    
    		//***여기서 응답 결과로 실행할 동작을 정의하면 됨***
            // [ data.키값 ] 이런 형태로 value 추출 가능 
            
            console.log(data); //응답 결과를 console 창에 출력
             
    })
    .catch(err => { // 오류 발생시 오류를 담아서 보여줌
        console.log('Fetch Error', err);
    });

POST

//POST 메서드로 전송할 데이터
let formData = new FormData(); 
formData.append('key', value); // key-value (키-값)의 형태로 데이터 추가함

//page 시작할 때 마다, db에 portfolio 데이터 요청
fetch('TARGET URL', { // url 입력 및 [options] 값 설정
    method: 'post', 
    body: formData  //전송할 데이터 body에 추가
	})
    .then(res => res.json()) //응답 결과를 json으로 파싱
    .then(data => {
    
    		//***여기서 응답 결과로 실행할 동작을 정의하면 됨***
            // [ data.키값 ] 이런 형태로 value 추출 가능 
            
            console.log(data); //응답 결과를 console 창에 출력
              
    })
    .catch(err => { // 오류 발생시 오류를 담아서 보여줌
        console.log('Fetch Error', err);
    });