(1) Axios, Fetch의 차이점

(1) Axios와 Fetch란?

API에 네트워크 요청이 필요한 애플리케이션을 개발할 때 Axios 및 Fetch와 같은 HTTP 클라이언트를 사용한다. 이 클라이언트를 이용하여 요청을 하면 이행(resolve) 혹은 거부(reject)할 수 있는 promise가 반환된다.

Fetch는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스이다. 브라우저에 내장되어 있어 따로 설치할 필요가 없다.

Axios는 브라우저 혹은 node.js 환경에서 실행할 수 있는 라이브러리로, npm 이나 yarn과 같은 패키지 매니저를 통해 설치하여 사용할 수 있다.

(2) GET 요청을 통한 비교

• 📝AXIOS

    const response= axios.get('/api/user')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });

• 📝FETCH

     const response= fetch('/api/user')
      .then(response => response.json())
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error(error);
      });

GET요청을 보냈을 때 Axios는 .get 메서드를 이용하여 간단하게 요청할 수 있고 response에 대한 응답 데이터는 바로reponse.data로 접근할 수 있다. 하지만 Fetch는 .json 메서드를 사용하여 response를 JSON 형식으로 파싱해야 하며, response는 체이닝된 다음 .then() 블록에서 접근할 수 있다.

이렇게 과정을 보면 Fetch는 JSON 형식으로 파싱을 해야하므로 한단계를 더 거쳐야 하는 것과 같은 번거로움이 있다.

(3) POST 요청을 통한 비교

• 📝AXIOS

       const response= axios.post('/api/user', {data}, 
            {
         	/* header와 body는 필요 시*/
              headers: {
                Authorization: `Bearer ${userToken}`,
                'Content-type': 'application/json',
            },
    	})
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });

• 📝FETCH

      const response= fetch('/api/user', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ data })
      })
        .then(response => response.json())
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.error(error);
        });

POST 요청을 보냈을 때 axios는 .post 메서드를 이용하여 요청을 보낼 수 있으며, 데이터는 두 번째 인자로 전달된다. response에 대한 응답은 바로 response.data로 접근할 수 있다. 하지만 fetch는 method를 명시해야하며, response에 대한 응답은 response.json()을 사용하여 JSON 형식으로 파싱해야 하고 체이닝된 다음 .then() 블록에서 접근할 수 있다.