[React] axios

axios 모듈을 통해 비동기 요청을 할 수 있다.
https://github.com/axios/axios

설치

npm i axios

GET 요청

import Axios from 'axios';
const axios = require('axios');

// ID로 사용자 요청
axios.get('/user?ID=12345')
  // 응답(성공)
  .then(function (response) {
    console.log(response);
  })
  // 응답(실패)
  .catch(function (error) {
    console.log(error);
  })
  // 응답(항상 실행)
  .then(function () {
    // ...
  });

• param을 이런 형태로 받아올 수도 있다.

axios.get('/user', {
    params: {
      ID: 12345
    }
  })

post 요청

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

멀티 요청

• 여러 개의 요청을 동시 수행할 경우 axios.all() 메소드를 사용한다.

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
  }));

json data 받아오기

Axios.get("json url")

async - await

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction

• data를 불러오는데 걸리는 시간을 javascript에게 기다려달라고 요청

getMovies = async () => {
    const {
      data: {
        data: { movies }
      }
    } = await Axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");
    this.setState({ movies, isLoading: false });
  };