[FE] fetch web APIs VS Axios 라이브러리의 차이점/공통점/예시

fetch web APIs

- 간단하게 네트워크 통신 가능함

- 긴 UI를 query params을 섞어서 해야했고, josn으로 변환처리를 해줘야 함

- 자바스크립트 내장라이브러리로 import하지않고 사용가능

- 지원하지 않는 브라우저가 있다.

- return 값은 Promise 객체이다.

 

Axios 라이브러리

- fetch 대용으로 사용할 수 있음

- json으로 변환해도 되지 않게 함 -> 라이브러리 자체에서 변환 해줌

- 브라우저 버전에 따라 XMLHttpRequest를 보내거나, fetch를 보내거나 해줌

- catch에 걸리면 .then을 실행하지 않고, console 창에 해당 에러 로그를 보여준다.

- request aborting 요청취소가 가능하다!

- 응답시간 초과를 설정하는 방법이 있다.

 

axios 라이브러리는 yarn/npm과 같은 자바스크립트 패키지 매니저로 간단하게 설치가 가능하다.

yarn add axios

 

fetch vs axios 소스코드 비교!

 

- 소스코드 길이에 큰 변화는 없지만, query params를 URL에 붙여 보내는 방식이 아니라 분리할 수 있어 axios가 비교적 깔끔하다.

- can I use에서 확인 가능한데, fetch는 오래된 브라우저가 지원이 안됨

 

 

fetch 

class Youtube {
    constructor(key) {
        this.key = key;
        this.getRequestOptions = {
            method: 'GET',
            redirect: 'follow',
        };
    }

    async mostPopular() {
        const response = await fetch(
            `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=IT트렌드&type=video&key=${this.key}`,
            this.getRequestOptions
        );
        const result = await response.json();
        return result.items;
    }

    async search(query) {
        const response = await fetch(
            `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=${query}&type=video&key=${this.key}`,
            this.getRequestOptions
        );
        const result = await response.json();
        return result.items.map(item => ({
            ...item,
            id: item.id.videoId
        }))
    }
}

export default Youtube;

 

axios 

class Youtube {
    // index.js에서 선언한 baseURL, key가 담긴 params를 가진 httpClient
    constructor(httpClient) {
        this.youtube = httpClient;
    }

    async mostPopular() {
        const response = await this.youtube.get('search', {
            params: {
                part: 'snippet',
                maxResults: '30',
                type: 'video',
                q: 'IT트렌드',
            }
        });
        return response.data.items;
    }

    async search(query) {
        const response = await this.youtube.get('search', {
            params: {
                part: 'snippet',
                maxResults: '30',
                q: query,
            }
        });
        return response.data.items.map(item => ({
            ...item,
            id: item.id.videoId
        }))
    }

    // async mostPopular() {
    //     const response = await fetch(
    //         `https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${this.key}`,
    //         this.getRequestOptions
    //     );
    //     const result = await response.json();
    //     return result.items;
    // }
}

export default Youtube;

 

 > index.js 에서 httpClient 만들어 dependency injection 적용

import Youtube from './components/service/youtube';
import axios from 'axios';

const httpClient = axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3',
  params: {
    key: process.env.REACT_APP_YOUTUBE_API_KEY
  },
});

const youtube = new Youtube(httpClient);