Axios와 async, await

Axios

• javascript로 구현된 비동기 통신 라이브러리이다.(npm, yarn등으로 다운로드)
• json parsing, stringfy의 번거로움 없이 손쉽게 셋팅하는 부분을 도와준다.
• 비교군으로 ajax, fetch가 있다.
  ajax: jquery가 있어야 사용할 수 있다.
  fetch: javascript내장객체에 기본으로 탑재되어 있다.

Axios에 async, await를 이용

• 비동기 통신을 구현하기 위해 axios와 async, await을 사용한다
• axios가 완료될때까지 시간이 필요하기 때문에 async와 await는 js에게 시간이 필요하다고 전달한 후, 완료될때까지 기다렸다가 완료된 후 계속한다.
  (그렇게 하지 않으면 axios가 data를 받아오고 있는중에 함수가 끝나버린다.)

getMovies = async () => {
   const {data: {data: {movies}}} = 
         await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json");
  
   this.setState({movies});
}
...

ES6문법

ES6의 console.log안에 있는 값과 ES5의 console.log안에 있는 값은 동일하다.
ES6

const {data: {data: {movies}}} = 
       await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json");
console.log(movies);

ES5

const movies = 
       await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json");
console.log(movies.data.data.movies);

setState를 이용할 때, key와 변수명이 같은 경우 한번만 사용해도 된다.
ES6

this.setState({movies: movies})

ES5

this.setState({movies})

Full Code

import React from 'react';
import './App.css';
//eslint-disable-next-line
import PropTypes from "prop-types";
import axios from "axios";

class App extends React.Component{
state = {
  isLoading: true,
  moives: []
}
getMovies = async () => {
   const {data: {data: {movies}}} = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json");
  
   this.setState({movies})
}
componentDidMount(){
 this.getMovies();
}
render(){
    const { isLoading} = this.state;
    return(
      <div>{this.state.isLoading ? "Loading" : "We are ready"}</div>
    ) 
  }
}
export default App;