Fetch API

Ajax를 구현하는데는 여러가지 방법이 있지만 그 중에 가장 최신 기술이 fetch API입니다.

Fetch API의 경우 XMLHttpRequest에서 부족했던 부분을 상당 부분 보완을 했습니다. 이로 인해 굳이 XMLHttpRequest를 사용할 필요 없이 Fetch API를 사용함으로써 많은 것을 할 수 있게 되었습니다.

과거에는 XMLHttpRequest가 불편해 JQuery ajax를 많이 활용하기도 했습니다. 이제 이 기법이 기본적인 자바스크립의 내장객체, Web API에도 제공이 되게 되었습니다.

장점 기존 XMLHttpRequest에서는 굉장히 긴 코드를 작성했지만 Fetch API에서는 https://jsonplaceholder.typicode.com/guide/ 에 설명이 되어 있는 코드를 그대로 가져다 활용을 할 수 있습니다.

fetch('<https://jsonplaceholder.typicode.com/posts/1>') //첫번째 인자로 호출할 url등록
  .then((response) => response.json()) //json데이터=>Json객체
  .then((json) => console.log(json)); // Json객체 => 일반적인 JS플레인객체

• URL fetch 요청
• Fetch 응답 객체를 받아옴
• 응답 객체: JSON => 순수 JS 객체로 변환

이 외에도 다양한 옵션들을 굉장히 자세하고 명시적으로 활용을 할 수 있습니다.

Fetch API의 메소드

1. GET

존재하는 자원을 요청하는 GET메소드는 단순히 원격 API에 있는 데이터를 가져올 때 사용됩니다. fetch함수는 디폴트로 옵션 인자가 필요 없습니다.

fetch("<https://jsonplaceholder.typicode.com/posts/1>")
  .then((response) => response.json())
  .then((data) => console.log(data))

응답(response) 객체는 json() 메서드를 제공하고, 이 메서드를 호출하면 응답(response) 객체로부터 JSON 형태의 데이터를 자바스크립트 객체로 변환하여 얻을 수 있습니다.

2. POST

새로운 자원을 생성할 때 요청하는 POST메소드의 경우 폼 등을 사용해서 데이터를 만들어 내거나 보내는 데이터의 양이 많거나, 비밀번호 등 개인정보를 보낼 때 사용됩니다.

fetch("<https://jsonplaceholder.typicode.com/posts>", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
}) .then((response) => response.json())
   .then((data) => console.log(data))

3. PUT

자원을 전체 수정할 때 요청하는 PUT메소드의 경우 method 옵션만 PUT으로 설정한다는 점 빼놓고는 POST 방식과 비슷하지만 자원 전체를 body의 데이터로 교체한다는 점에서 차이점이 있습니다.