[백엔드] fetch / axios 비교

코드예시를 통해 fetch와 axios의 차이점을 살펴본다.

1-1. fetch

• react-native에 적합한 함수.
• fetch는 url를 인자로 전달받는다.
• 주어진 url의 res를 전달하며, json data형식으로 반환한다.
• 반환(return)하는 res는 body 속성을 지닌다.

1-2. 코드예시

• url 정의
• fetch를 통해 url를 전달받아, 해당 url에 대한 res를 body 속성으로 반환한다.

const API_URL = "https://yts.mx/api/v2/list_movies.json"

//API control
export const checkmovie = () => 
//Can get whole data by async operation
    fetch(API_URL)
    .then(res => res.json())
    .then(json => json.data.movies)

2-1. axios

• fetch보다 빠르고 호환하는 브라우저가 더 많다.
• axios는 url인자가 따로 없고, option 객체로 들어간다.
• fetch와 마찬가지로 res를 전달하며, json data형식으로 반환한다.
• 반환하는 res는 data 속성을 지닌다.

2-2. axios 기본포맷

//axios
const option ={
  url ='http://localhost3000/test`
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  data:{
  	name:'sewon',
    	age:20
  }

  axios(options)
  	.then(response => console.log(response))

2-3. axios 코드예시(fetch와 비교)

• axios.get('url')을 통해 원하는 정보를 얻을 data의 경로를 탐색한다.
  ※ API를 통해 보여지는 화면이 아닌, 반드시 CLI 환경으로 정확한 경로를 알아야 한다.

export const seemovie = async () => {
    const movies = await axios.get('https://yts.mx/api/v2/list_movies.json')
    console.log(movies)
}

• data : { data : movies }에 얻고자 하는 정보가 모여있음을 확인한다.
• 확인한 경로 그대로 data를 불러온다.

//seemovie by axios
export const seemovie = async (id) => {
    //const movies = await axios.get('https://yts.mx/api/v2/list_movies.json')
    //console.log(movies)
    const{
        data:{
            data: {movies}
        }
        //data params (by then or callback)
    }

• 비동기처리(Ajax, 여기서는 then 혹은 callback)를 통해 axios URL을 받아온다.
• 아래 params는 정제된 데이터를 의미하는데, movie_id : id 라는 조건으로 선별된 데이터를 확보하도록 장치해주었다.

//seemovie by axios
export const seemovie = async (id) => {
    //const movies = await axios.get('https://yts.mx/api/v2/list_movies.json')
    //console.log(movies)
    const{
        data:{
            data: {movies}
        }
        //data params (by then or callback)
    }
//ajax
= await axios('https://yts.mx/api/v2/list_movies.json', {
        params: {
            movie_id : id
        }
    })

    return movies
}

• 최종적으로 선별된 데이터는 movies에 담겨 GraphQL API을 통해 보여진다.

3. 참조링크

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API
https://sigcho.tistory.com/126