axios 라이브러리 (fetch보다 좋은 이유) - 수정중

YS_Study.log·2022년 2월 27일

장점 :
1. JSON 으로 자동으로 변환해준다.
2. 예전 브라우저에서도 호환이된다.
fetch 설명

import axios from "axios";

class Youtube {
  constructor(key) {
    // 유튜브와 통신하는 베이스 유튜브 클라이언트 생성
    this.youtube = axios.create({
      baseURL: "https://www.googleapis.com/youtube/v3",
      params: { key: key },
    });
    this.getRequestOptions = {
      method: "GET",
      redirect: "follow",
    };
  }
  
 async mostPopular() {
    const res = await this.youtube.get("videos", {
      params: {
        part: "snippet",
        chart: "mostPopular",
        maxResults: 25,
      },
    });
    return res.data.items;

차이점:
1. fetch는 json()함수를 사용해서 JSON으로 변환해서 데이터를 받아와야한다.
2. prams를 url로 따로해야하서 가독성 떨어진다.

class YoutubeFetch {
  constructor(key) {
    this.key = key;
    this.getRequestOptions = {
      method: "GET",
      redirect: "follow",
    };
  }
  
const res = await fetch(
      `https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${this.key}`,
      this.getRequestOptions
    );
    const data = await res.json();
    return data.items;
profile
느리지만 조금씩 공부하는 중 입니다. 현재 1년 6개월차 신입입니다 ><!

0개의 댓글