Axios 사용과 API GET 요청

본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

---

1. Axios를 사용한 이유

• Axios는 현재 가장 많이 사용되는 JavaScript HTTP Client로 HTTP 요청을 Promise 기반으로 처리한다.
• 이미 JavaScript에는 fetch api가 있지만, axios가 조금 더 많은 브라우저에서 지원이 가능하다.
  (※fetch : Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원)
• fetch 는 json 데이터 형식로 변환을 해줘야 하지만, Axios는 자동으로 변환되는 특징이 있다.

 

2. 사용 방법 (예시)

• Axios 설치하기

npm install axios
// 또는
yarn add axios

• GET 요청 수행하기

const axios = require('axios');

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });

// 선택적으로 위의 요청은 다음과 같이 수행될 수 있습니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });  

// async/await 사용을 원한다면, 함수 외부에 `async` 키워드를 추가하세요.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

---

참 고

 

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs