Fetch, Axios

Hyun·2024년 6월 20일

frontend 필요 지식

목록 보기
1/9
post-thumbnail

Axios

axios는 비동기 작업의 상태를 나타내는 Promise 기반의 http 클라이언트 라이브러리다.
그래서 axios를 사용하기 위해서는 설치를 해줘야 한다.

라이브러리이기 때문에 사용하기 위해서는 import를 꼭 해줘야 한다.

import axios from 'axios';

axios.get('https://api.example.com/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

Fetch api

웹에 내장되어 있는 api. 별도의 설치 없이 이용이 가능하다.

fetch('https://api.example.com/data')
    .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(error);
    });

주요차이점

결론

Axios는 더 많은 기능과 직관적인 사용법을 제공해서, 복잡한 프로젝트에서 사용하기에 적합한거 같다.
하지만 이것도 라이브러리이기에 설치를 해야한다는 번거로움이 있다.
Fetch API는 기본적인 http요청을 간단하게 처리하고자 할 때 유용하며, 추가적인 설치 없이 사용할 수 있다는 장점이 있다.

개인적으로는 json으로 바로 변환해주는 기능이 가장 마음에 들어 axios를 선호하지만, 간단한 프로젝트나 데이터 형식이 복잡하지 않다면 fetch를 사용하는게 간편한 것 같다.

0개의 댓글