Fetch API

0. 웹 통신 흐름

내가 쓰고 싶어서 만드는 서비스 (30).png

*api란? Application Programming Interface(애플리케이션 프로그래밍 인터페이스) : 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의합니다. API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있습니다*

1. fetch란?

자바스크립트로 서버에 요청을 보내어 정보를 받거나 데이터를 처리 할 수 있는 기능

fetch외에도 axios, GraphQL+Apollo, React Query, SWR 와 같은 라이브러리가 있는데 fetch는 브라우저에 내장되어있는 기본 api이다. (나머지는 다 라이브러리)

[ 요청하기 ]

기본문법

let promise = fetch(url, [options])

첫번째 매개변수**(url)에는 내가 요청할 데이터 경로 입력 두번째 매개변수(options)** 에는 요청에 필요한 다양한 옵션을 포함하는 객체(필수 아님)

options 방식(method) : GET(조회), POST(전송), PUT(수정), PATCH(부분 변경), DELETE(삭제) 요청헤더(headers) : 요청에 대한 정보가 담긴 객체를 넘길 수 있다. (쿠키 등) body : 서버에 보낼 데이터를 전송할 수 있다.

그 외에도 mode, credentials, cache 등이 있다.

GET : 서버로부터 html, 이미지 등 각종 데이터를 요청한다. POST : 서버에 새로 저장될 자료를 보낸다.(ex. 게시글 등록) PUT : 특정 데이터 전체를 새로 저장(ex. 게시글 수정) PATCH : 특정 데이터 일부 수정(ex. 게시물의 조회수, 좋아요) DELETE : 특정 데이터 삭제

[응답 받기]

요청 후 **HTTP 상태 코드(100~)**와 성공 여부(ok) 등을 받을 수 있고 성공 시 데이터 처리가 된다.(전송/조회/삭제/수정)

HTTP 상태 코드 1xx : 요청을 성공적으로 받았으며 서버가 해당 작업을 진행중일 때 2xx : 성공으로 받고 실제 그 요청이 이루어 진 경우 3xx : 주소가 변경되어 새 url로 자동 이동 시켜줄 때 4xx : 클라이언트 오류 - 사용자가 한 요청에 문제가 있을 때 5xx : 서버 오류 - 요청은 문제가 없지만 서버에 이상이 있는 경우

const response = fetch(’url’); console.log(response.status) // 상태 코드 출력 console.log(response.ok) // 성공 시 true 실패하면 false 출력