fetch API와 axios 비교

Fetch API

Fetch API는 자바스크립트에서 HTTP 요청을 보내고 응답을 처리하는 방식으로, 기존의 XMLHttpRequest를 대체함

Promise를 기반으로 하여 비동기 작업을 더 간결하게 처리

 

기본 사용방법

fetch(url, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

 

url과 options를 parameter로 받아서 사용

options는 기본적으로 GET요청이 실행

 

POST 요청

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

단점

• 기본 기능: fetch는 기본적으로 GET 요청만 지원하고, 다른 메서드를 사용하려면 추가 설정이 필요
• 응답 처리: fetch는 요청이 실패하더라도(예: 404, 500 오류) Promise가 거부되지 않기 때문에 추가적인 체크가 필요
• 브라우저 호환성: fetch는 일부 구형 브라우저에서 지원되지 않을 수 있음

이 문제들을 해결할 수 있는 방법은 axios를 사용하자

---

Axios

Axios는 HTTP 요청을 더 간단하고 직관적으로 할 수 있도록 도와주는 자바스크립트 라이브러리

Promise 기반이며, fetch보다 사용하기 편리한 기능을 많이 제공함

 

기본 사용 방법

axios.get(url, config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

 

 

url과 config를 parameter로 받아서 사용

config는 기본적으로 GET요청이 실행

 

실제 사용 방법

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

// 헤더 설정
axios.get('https://jsonplaceholder.typicode.com/posts/1', {
  headers: {
    'Authorization': 'Bearer token'
  }
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

 

 

인터셉터

axios에서는 요청과 응답에 인터셉터를 추가해 특정 로직을 삽입할 수 있음

then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있음

 

요청 인터셉터

instance.interceptors.request.use(
  (config) => {
    // getToken() - 클라이언트에 저장되어 있는 액세스 토큰을 가져오는 함수
    const accessToken = getToken();

    config.headers['Content-Type'] = 'application/json';
    config.headers['Authorization'] = `Bearer ${accessToken}`;

    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

 

 

응답 인터셉터

instance.interceptors.response.use(
  (response) => {
    if (response.status === 404) {
      console.log('404 페이지로 넘어가야 함!');
    }

    return response;
  },
  async (error) => {
    if (error.response?.status === 401) {
      // isTokenExpired() - 토큰 만료 여부를 확인하는 함수
      // tokenRefresh() - 토큰을 갱신해주는 함수
      if (isTokenExpired()) await tokenRefresh();

      const accessToken = getToken();

      error.config.headers = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${accessToken}`,
      };

      // 중단된 요청을(에러난 요청)을 토큰 갱신 후 재요청
      const response = await axios.request(error.config);
      return response;
    }
    return Promise.reject(error);
  }
);

 

axios 인스턴스를 생성하는 코드에 요청 인터셉터와 응답 인터셉터를 추가하게 되면 생성한 인스턴스를 사용하는 모든 api에서 예외처리나 기본적으로 해야하는 로직을 추가로 작성하지 않아도됨

 

그렇다면 예외적으로 인터셉터를 적용하고 싶지 않은 경우가 있을 수도 있음

eject

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

 

필요할 때 인터셉터 제거 가능

단, 제거시 나중에 인스턴스를 사용하려면 다시 등록해야함

 

생각보다 eject를 사용하게 되면 생각해야 할 것이 많은 것 같아 사용성은 고민해봐야 할 것 같음

 

동시 요청 처리

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/posts/1'),
  axios.get('https://jsonplaceholder.typicode.com/posts/2')
])
.then(axios.spread((response1, response2) => {
  console.log('Response 1:', response1.data);
  console.log('Response 2:', response2.data);
}))
.catch(error => console.error('Error:', error));

 

all을 사용하여 동시에 api 요청도 가능

---

axios도 대체제가 나오고 있음

alova

https://alova.js.org/

Alova.JS - Creative next generation request library | Alova.JS