[js] fetch 를 이용한 HTTP 요청

fetch API는 HTTP 요청을 보내고 응답을 받기 위한 메서드를 제공하는데, 이 중 GET, POST, PUT, DELETE 메서드를 이용하여 요청을 보내는 방법을 정리한다.

 

GET 요청

GET 요청 GET 요청은 서버로부터 데이터를 가져오기 위한 메서드. GET 요청을 보내려면 fetch() 메서드에 URL을 전달하면 된다. fetch() 메서드는 Promise 객체를 반환한다. 따라서 then() 메서드를 사용하여 응답 데이터를 처리할 수 있다.

 

fetch('https://~~') 
  .then(response => response.json()) 
  .then(data => console.log(data)) 
  .catch(error => console.error(error));

 

POST 요청

POST 요청 POST 요청은 서버로 데이터를 전송하기 위한 메서드. fetch() 메서드의 두 번째 매개변수로 객체를 전달하여 POST 요청을 보낼 수 있다. 객체의 body 속성에는 전송할 데이터를 포함시킬 수 있다.

fetch('https://~~', { 
        method: 'POST', 
        body: JSON.stringify({ name: 'John', age: 30 }), 
        headers: { 'Content-Type': 'application/json' } }) 
  .then(response => response.json()) 
  .then(data => console.log(data)) 
  .catch(error => console.error(error));

 

PUT 요청

PUT 요청 PUT 요청은 서버의 데이터를 수정하기 위한 메서드. fetch() 메서드에 객체를 전달하여 PUT 요청을 보낼 수 있다.

fetch('https://~~', {
       method: 'PUT', body: JSON.stringify({ name: 'John', age: 35 }), 
       headers: { 'Content-Type': 'application/json' } }
       ) 
       .then(response => response.json()) 
       .then(data => console.log(data)) 
       .catch(error => console.error(error));

 

위 예시에서 headers 속성은 POST, PUT 요청을 보낼 때 필요한 내용이며, 해당하는 HTTP 메서드와 데이터 타입 등을 지정할 수 있다. 이외에도 fetch() 메서드에는 다양한 옵션을 설정할 수 있다.

 

DELETE 요청

DELETE 요청 DELETE 요청은 서버의 데이터를 삭제하기 위한 메서드. fetch() 메서드에 객체를 전달하여 DELETE 요청을 보낼 수 있다.

fetch('https://~~', { method: 'DELETE', }) 
	.then(response => response.json()) 
	.then(data => console.log(data)) 
	.catch(error => console.error(error));