javascript Axios 란?

 Axios 란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다

 

//설치하기
npm install axios

 

GET 요청

//GET 요청
axios.get("url"[,config])

첫번째 인자에는 url주소, 두번째 인자에는 요청 시 사용할 수 있는 옵션들을 설정

fetch('https://koreanjson.com/users/1', { method: 'GET' })
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

import axios from 'axios';


//promise ver
axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));
  
  
  
  // Async / Await ver
async function request() {
  const response = await axios.get('https://koreanjson.com/users/1');
  const { data } = response;
  console.log(data);
}

POST 요청

//post 요청
axios.post("url"[, data[, config]])

fetch('https://koreanjson.com/users', {
  method: 'POST',
  headers: {
    // JSON의 형식으로 데이터를 보내준다고 서버에게 알려주는 역할입니다.
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ nickName: 'ApeachIcetea', age: 20 }),
})
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

import axios from 'axios';


//promise ver
axios
  .post('https://koreanjson.com/users', { nickName: 'ApeachIcetea', age: '20' })
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));
  
  
  
  // Async / Await ver
async function request() {
  const response = await axios.post('https://koreanjson.com/users', {
    name: 'ApeachIcetea',
    age: '20',
  });
  const { data } = response;
  console.log(data);
}