자바스크립트 - fetch 이용해서 Ajax 비동기 통신 하기

fetch

fetch API를 이용하면 서버와 브라우저를 비동기적으로 통신할 수 있습니다.

 

fetch API 이전에는 XMLHttpRequest를 이용해서 통신을 하였습니다만,

너무 어렵고 복작해서 주로 jQuery 라이브러리를 많이 사용하였습니다.

 

현재는 fetch로 브라우저 window 객체에 내장 되어 있어서

다른 라이브러리 없이 비동기 통신을 할 수 있습니다.

 

fetch 사용법

fetch(URL, Options);

 

Get 방식 호출

기본적으로 Options 값이 없으면 GET 방식으로 호출됩니다.

response는 json()으로 변경하면 요청한 데이터를 가지고 올 수 있습니다.

fetch("https://jsonplaceholder.typicode.com/posts").then(function(response) {
   return response.json();
}).then(function(data) {
   console.log(data);
})

 

Post 방식 호출

두 번째 인자에 method 속성을 POST로 설정합니다.

전달한 데이터는 body 속성에 추가합니다.

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST"
  body: JSON.stringify({id: 1})
}).then(function(response) {
   return response.json();
})

 

async, await 사용하기

async, await 방법을 사용하면 아래와 같이 사용 가능합니다.

async function getData() {
   const response = await fetch("https://jsonplaceholder.typicode.com/posts");
   const data = await response.json();
   return data;
}

getData();