[새싹 프론트엔드] fetch

정재은·2022년 11월 20일

JavaScript

목록 보기

6/15

fetch API

요청과 응답 등의 요소를 자바스크립트에서 접근하고 조작할 수 있는 인터페이스를 제공한다
네트워크의 리소스를 쉽게 비동기적으로 가져 올 수 있다

fetch( ) 메서드

fetch는 비동기적으로 실행한다

fetch( resource, options )
resource -> JSON파일의 경로
options -> 필요여부에 따라 작성

fetch( url, options )
  .then(response => console.log(response))
  .catch(error => console.log(error));

요청 결과가 성공적으로 처리되면 .then( ) 실행
요청 결과가 실패하면 .catch( ) 실행

response 객체

HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 포함
JSON 문자열 형태로 변환을 해줘야 처리 가능
response → JSON 형태로 파싱

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .catch(error => console.log(error));

response 객체의 메서드

response.text( ) → 응답을 텍스트 형태로 반환
response.json( ) → 응답을 JSON 형태로 반환
response.formData( ) → 응답을 FormData 객체 형태로 반환

가상의 json-server

json 파일을 사용하여 간단한 테스트를 위한 REST API server를 구축할 수 있는 패키지
+) 참고 : https://www.npmjs.com/package/json-server
json server 설치하기 (node.js가 설치되어 있어야 한다)

$ npm install -g json-server

json server 실행하기

$ json-server --watch 파일명 --port 포트번호

// 기본 포트번호는 3000 (생략가능)
// 변경시 원하는 포트번호를 입력해주면 된다

fetch( ) GET

• fetch( ) 메서드는 디폴트로 GET 방식으로 작동
• 메서드 호출 시, 별도의 옵션을 추가하지 않아도 된다

fetch('http://localhost:4000/books')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

// 설명 //

.then((response) => response.json())
	-> 요청에 성공하면 url에서 받아온 값을 json형식으로 변경

.then((data) => console.log(data))
	-> json형식으로 변경한 data를 console에 출력
    
.catch((error) => console.log(error))
	-> 요청에 실패하면 error요인을 console에 출력

fetch( ) POST

• fetch( ) 메서드의 두 번째 매개변수 options 이용

method - 데이터 전송 방식
headers - HTTP 요청 헤더
body - HTTP 요청 전문

ex) 폼태그에서 값 추가하기

const form = document.getElementById("form");
form.addEventListener("submit", (e)=>{
   e.preventDefault();
   const formData = new FormData(form);
   const bookInfo = new URLSearchParams(formData);

   fetch('http://localhost:4000/books', {
     method: "POST",
     body: bookInfo,
   })
   .then( (response) => response.json() )
   .then( (data) => console.log(data) )
   .catch( (error) => console.log(error) )
});

// 설명 //

 e.preventDefault();
// 페이지가 새로고침 되는 것을 방지 (form태그의 기본행동을 막아준다)

const formData = new FormData(form);
// form 전송이 가능하도록 양식을 변경하고

const bookInfo = new URLSearchParams(formData);
// URLSearchParams를 이용해 사용가능한 데이터 양식으로 변경해준다 (키, 값)
    
fetch('http://localhost:4000/books', {
     method: "POST",
     body: bookInfo,
   })
// 두번째 매개변수인 options를 사용하여
// 데이터를 추가하고(=POST), 전송하고 싶은 데이터를 작성(=body)