fetch(javascript) 사용법

minjjai·2023년 1월 5일
0

Ajax

ajax는 Asynchronous Javascript And Xml의 약자로,
브라우저의 XMLHttpRequest객체를 통해 페이지의 새로고침 없이 페이지의 일부를 변경하기 위한 데이터를 가져오는 기법을 의미한다.

처음에는 XMLHttpRequest객체로 통신을 했지만 번거로움이 있어 JQuery로 구현하다가 fetch API가 새로 등장하면서 표준으로 자리잡았다.

fetch 사용법

  • 기본 형태
fetch("url", { option }).then((response) => console.log(response));

위의 기본 형태와 같이 url로 요청을 보내고 요청을 보낼 때의 추가 정보들을 option에 추가한다.
요청을 보내고 응답 데이터(response)가 오면 그 응답 데이터를 콘솔에 찍는 코드이다.

  • 더 잘 쓰기
fetch("/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Post",
    body: "test post write",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data + '글이 작성되었습니다.'))

실제로 프로젝트를 고도화 하다보면 위와 같이 fetch를 구성하게 된다.
get요청일 때는 fetch의 디폴트 값이 get이기 때문에 추가적인 옵션이 필요없지만 get이외의 post, put, delete 등의 요청을 보내기 위해서는 위와 같이 옵션을 주어야 한다.

위의 fetch코드를 살펴보자면, /post url 로 post요청을 보내는 것이고, headers의 부가 정보를 보면 내용의 데이터 타입은 json형태인 것을 볼 수 있다.
body에는 실어 보낼 정보들이 들어가는데, 글의 제목인 "Post", 내용인 "test post write", 유저아이디인 1이 있다. 요청을 보내 글이 저장되고 응답이 오면(then) 그 응답 데이터를 json으로 변환하고, 그 데이터와 글이 작성되었다는 메시지를 콘솔에 출력한다.

지금까지 ajax방식 중 하나인 fetch에 대해서 정리를 해보았다.

profile
BackEnd Developer

0개의 댓글