본문 바로가기
Frontend

Axios에 대해서

by 구라미 2020. 1. 16.

 

Axios는

Axios는 뷰에서 권고하는 Promise 기반의 HTTP 통신 라이브러리이다.  HTTP 클라이언트 라이브러리이다.

 

https://github.com/axios/axios#example

 

axios/axios

Promise based HTTP client for the browser and node.js - axios/axios

github.com

features

- 브라우저로부터 XMLHttpRequests를 만들어낸다.

- node.js로부터 http requests를 만들어냄

- Promise API를 지원한다.

- request와 response를 인터셉트

 

 

 

Axios 사용방법

Axios 라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있다. 

 

 

Axios로 GET request 동작하기

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);
  })
  .finally(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);
  })
  .finally(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

POST request 동작하기

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

 

'Frontend' 카테고리의 다른 글

Javascript 싱글톤 패턴  (0) 2020.01.21
Typescript | Typescript가 대체 뭐야??  (0) 2020.01.20
Vue | Vue 개발환경 설정  (0) 2019.12.18
꼭 기억하기 JSON  (0) 2019.10.31
09월 02일 월 | UI 화면구현 11 - Bootstrap  (0) 2019.09.02

댓글