[react] axios get, post, put, delete api 호출 하기.

 

React에서 API를 호출하기 위해 axios를 활용하는 방법이 있습니다.

이 포스팅에서는 axios 설치 방법과 Get, Post, Put, Delete API를 호출하는 방법를 정리하겠습니다.

 

1. Axios 설치

 

Axios는 HTTP 클라이언트 라이브러리로 React, Vue에서 많이 사용되는 라이브러리입니다.

Axios는 Promise 기반으로 XHRHttpRequests 요청을 쉽게 할 수 있습니다.

 

설치방법

 

Using npm:

npm install axios

Using yarn:

npm install axios

Using CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 

2. Axios 사용 API 호출 하는 방법

 

GET API 호출:

GET API를 호출하는 방법으로 두가지가 있습니다.

params를 URL에 넣는 방법, 따로 parmas를 추가하는 방법 필요한 방법으로 사용하시면 됩니다.

 

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

GET과 DELETE는 동일하게 호출할 수 있습니다.

 

DELETE API 호출:

axios.delete('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

 

POST API 호출:

단일 API를 호출하는 방법 그리고 멀티로 두개의 API를 호출하여 가져오는 방법이 있습니다.

 

단일 API 호출:

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

멀티 API 호출:

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) {
    // Both requests are now complete
  }));

 

POST는 PUT과 동일하게 호출이 가능합니다.

 

PUT API 호출 :

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

 

이외도 axios는 다양한 매소드를 지원합니다.

 

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])