limjunho

Fetch함수(HTTP Request)

 
  • Nov 23, 2020

Fetch함수는 HTTP 요청에 최적화 되어있고 상태도 잘 추상화 되어있고, promise를 기반으로 되어있기 때문에 상태에 따른 로직을 추가하고 처리하는데 최적화 되어있다.

send me email if you have any questions.

기본 문법

let promise = fetch(url, [options])
  • url-접근하고자 하는 URL
  • options - 선택 매개변수, mehtod나 header 등을 지정할 수 있다.
fetch('url')
.then(response => response.json())
.then(response => data.filter(item => item.isRequired));

fetch 함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나이다.
fetch API는 3개의 interfeace를 도입하고 있는데 Headers, Request, Response이다.

Headers

Headers 객체는 HTTP header와 대응되는 객체.

Request

Request는 HTTP요청을 통해 자원을 가져오는 인터페이스 이다.
Request는 URL, Header, Body가 필요하다. 그리고 Request에 대한 mode제한과 certidicate 관련 설정도 추가 할 수 있다.
Request 객체의 첫번째 인자는 호출한 Path가 들어가고, 두번째 인자에는 Request에 대한 정보가 들어간다.
Request에 대한 정보는

  • method
  • headers
  • body 등등..

method Method는 HTTP method와 동일한 스팩으로 들어가면 된다. GET/POST/HEAD/PUT/DELETE/OPTION/PATH 등등

메서드의 디폴트 값은GET이며 소문자로 지정해도 자동으로 대문자로 Uppercase된다.

headers headers 는 Request Header를 지정해주는 곳인데, 2가지 형식으로 넣을 수 있다.
Object lireral과 Headers 객체의 인스턴스를 넣을 수 있다.

const req = new Request('/api/posts', {
  method: "GET",
  headers: {
    'content-type': 'application/json',
  }
});
const req2 = new Request('/api/posts', {
  method: 'GET',
  headers: new Headers({
   'content-type': 'application/json',
  })
})

body body는 HTTP Request에 실을 데이터인데 여러가지 타입을 넣을 수 있다.
득, 전달하고자 하는 응답 내용이다. 백엔드와 통신할 때는 객체로 통신하기 때문에 객체타입으로 작성해야 한다.

Response

Response는 fetch를 호출하면 가져올 수 있는 객체이다.

  • status
    status는 HTTP response Code를 담고 있다.
    HTTP status code 정리

  • statusText
    statusText는 기본값은 ok이고 상황에 따라 다른 Message가 담길 수 있다.

  • ok
    ok는 status의 200-299의 값을 추상화한 boolean으로 200-299사이의 status이면 true를 가지게 된다.

  • headers
    Reponse headers 이기 때무에 headers의 guard 속성은 reponse로 되어있다.

  • tpye
    type은 Response 객체의 type을 말한다.

예제코드

fetch("http://host.../u/r/i/", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => {
          if (response.status === 200) {
            console.log("status : 200");
            // 처리로직 구현
          } else if (response.status === 404) {
            console.log("status : 404");
            // 처리로직 구현
          } else {
            // 처리로직 구현
          }

          return response.json();
        })
        .then((responseData) => {
          setText(
            responseData.data
          );
        });

위의 코드는 "http://host.../u/r/i/"에 GET요청을 보내 응답받은 데이터를 랜더링하는 코드이다.

then 함수

자바스크립트에서 함수는 동기함수, 비동기 함수로 나뉜다. 우리가 작성한 코드들은 위에서 아래로 순차적으로 코드가 실행되고 하나의 코드가 종료되지 않는다면 다음 코드로 넘어가지 않는다. 이것이 동기함수이다.
API를 호출할 때, 사용하는 fetch 함수는 대표적인 비동기함수이다. 그렇기 때문에 API호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어간다.
하지만 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수를 쓰는 것이다.

참고 https://velog.io/@daybreak/React-Fetch%ED%95%A8%EC%88%98#response

© limjunho blog
Search