Fetch API 란?

석진·2024년 2월 14일
0
post-thumbnail
post-custom-banner

📌Fetch API

RemoteURL 에 있는 리소스를 가져올때 사용

React-Native에서 새로 정의 한것이 아닌, MDN에 이미 만들어진것

📌HTTP

Hyper Text Transfer Protocol의 약자
Server에 데이터 저장, 업데이트 등을 요청하고 결과를 되받는것

📌Request Method

어떤 동작을 위한 요청인지를 미리 나타내는 것

  • 종류: GET, POST, PUT, PATCH, DELETE

📌GET

특정 리소스를 가져와야 할 때 사용

  • ex) 특정 회원의 데이터 조회, 특정 성별을 가진 회원들을 조회 등

📌POST

어떤 데이터의 저장해야 할때 사용

  • ex) 회원가입, 로그인 등

📌PUST

특정 소스를 업데이트 할때 사용

  • ex) 회원의 주소 데이터, 결제 데이터 등

📌PATCH

특정 리소스 중 특정 정보만 변경할때 사용

  • ex) 회원의 나이, 전화번호 등

📌DELETE: 리소스를 아에 삭제

ex) 회원 탈퇴 등

📌Request 데이터 전달

데이터를 서버로 전달하는 방법
Path parameter, Queryparameter, Request Body 등

📌 Path parameter

  • URL Path 내부에 값을 함께 넘기는것
    /person/${:useId}/

📌 Queryparameter

  • URL 뒷부분에 ?를 붙이고 그 뒤에 key 값과 value 값을 넘겨주는 것
    /person?birthday={:date}&sort={:regeditDate}

📌 Request Body

  • URL에 데이터가 보이지 않고, Body에 작성해서 넘기게 됨
    데이터가 긴 경우 Request Body 사용이 적합 (URL 길이제한)

📌항목별 사용처

Path Parameter: 특정 유저 ID를 통해 정보를 가져올 때

Query Parameter: 이름, 성별로 검색해서 가져올때

Request Body: 회원가입, 게시글 등록 할때

📌Response status code

결과 처리에 대해서 숫자 형태로 서버로부터 전달받음 자주 사용하는 코드 [200, 400, 403, 404, 500]

📌Response status code( 200 & 500 )

200: 정상적으로 처리 됨
500: 서버에서 처리 중 에러가 발생함
400: Client에서 값을 잘못 전달함
403: 유저정보는 식별되나, 해당 URL로의 접근이 거부됨
404: URL이 존재 하지 않음

📌Fetch API 사용방법

fetch(REQUEST_URL,{method:POST', body:{}}).then((result) => result.json())
  • 옵션에서 세부사항들을 적게 된다. method, body
  • 결과를 받고 난 뒤에 json이라는 함수, text라는 함수를 통해서 해당 response를 파싱
  • 전달받은 Promise에는 Text or json 등이 있어서 해당 값 들을 잘 사용해 주면 된다.
profile
내 서비스 만들기
post-custom-banner

0개의 댓글