fetch API란?

Fetch API는 HTTP 통신 클라이언트 인터페이스이다.

 

 

 

js에서 서버와 통신을 하기 위해

1. jquery를 이용하여 ajax() 함수 호출을 통해 사용하거나

2. XMLHttpRequest 객체를 정의하여 사용

 

 

이 두 가지 방법을 사용했을 것이다.

 

 

 

보통은 1번을 많이 사용했을텐데,

jquery파일을 반드시 정의해야 사용이 가능했다.

 

 

 

하지만 Fetch API를 알고 나서 jquery를 써야 할 필요성이 사라졌다.'

 

 

fetch('URL')
  .then((res) => {
    return res.json();
  })
  .then((data)=>{
    return data;
  });

 

 

js의 일부 기능은 비동기로 동작하는 게 많다.

 

 

Fetch API도 비동기로 동작하여 결과를 받아오는 시점과 출력하는 시점이 다르다.

비동기 제어를 하지 않으면 이상한 값이 출력된다.

 

 

때문에, 내부에서 promise를 정의하여 순차적으로 결과를 받아와 처리하는 체이닝 기법을 사용한다.

 

 

그러나, 체이닝을 하면 계속되는 들여쓰기로 인해 코드 가독성이 떨어질 수 있다.

 

 

그래서, async / await 기법이 새로 나왔다.

 

 

// define fetchAPI()
async function fetchAPI(){
  const response = await fetch(URL);
  const data = await response.json();
  return data;
}

// call function fetchAPI()
async function call(){
  const getData = await fetchAPI();
}

async / await를 사용한다면 다음과 같이 사용하는 것이 가능하다.

만약 Body에 값을 담아서 보내야 한다면 어떻게 해야 할까?

 

// define fetchAPI()
async function fetchAPI(){
  const option = {
    method : "POST",
    headers : {"Content-Type" : "application/json"},
    body : JSON.stringify({
      {key} : {value},
      ...
    });
  }
  const response = await fetch(URL, option);
  const data = await response.json();
  return data;
}

// call function fetchAPI()
async function call(){
  const getData = await fetchAPI();
}

body에 값을 담을 때는 다음과 같이 코드를 작성하면 된다.

 

 

 

// define fetchAPI()
async function fetchAPI(){
  const option = {
    method : "GET",
    headers : {"Content-Type" : "application/json"}
  }
  const response = await fetch(URL?{key}={value}&{key}={value}, option);
  const data = await response.json();
  return data;
}

// call function fetchAPI()
async function call(){
  const getData = await fetchAPI();
}

GET방식으로 보내야 된다면 다음과 같이 작성한다.

 

 

 

사용법이 그리 어렵지 않기 때문에, 더 이상 jquery를 쓸 이유가 없다.

 

fetch와 비슷한 구조를 가지는 axios도 존재한다.

 

 

현업에서 이 두 가지를 흔하게 쓰고 있으므로,

가능하면 fetch와 axios 사용을 권장한다.