Axios로 작업하기 위한 완벽한 가이드

Axios는 클라이언트 측 JavaScript 코드 또는 서버 측 Node.js 코드에서 HTTP 요청을 전송하기 위한 간단한 API를 제공하는 JavaScript 라이브러리입니다. Axios는 비동기 코드를 더 쉽게 유지 관리할 수 있도록 해주는 JavaScript의 Promise API를 기반으로 합니다.

Axios 시작하기

콘텐츠 전송 네트워크(CDN)를 사용하거나 프로젝트에 설치하여 앱에서 Axios를 활용할 수 있습니다.

HTML에서 직접 Axios를 사용하려면 아래 CDN 링크를 복사하여 HTML 파일의 헤드 섹션에 삽입하세요:

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

이 방법을 사용하면 HTML 스크립트 본문에서 Axios와 해당 HTTP 메서드를 사용할 수 있습니다. Axios는 React와 같은 프레임워크에서 REST API를 사용할 수도 있습니다.

Node.js 프로젝트에서 Axios를 사용하려면 npm 또는 yarn 패키지 관리자를 사용하여 프로젝트 디렉토리에 설치하세요:

 npm install axios
# or
yarn add axios

 

설치 후 JavaScript 프로젝트에서 Axios 사용을 시작할 수 있습니다:

 const axios = require('axios');
 

이 가이드에 따라 무료 JSONPlaceholder API로 작업하게 됩니다. 이 API에는 리소스 세트가 있지만 /comments 및 /posts 엔드포인트만 활용하게 됩니다. 엔드포인트는 데이터를 검색하거나 조작하기 위해 액세스할 수 있는 특정 URL입니다.

Axios로 GET 요청하기

Axios를 사용하여 GET 요청을 하는 방법에는 여러 가지가 있습니다. 그러나 구문은 일반적으로 기본 설정에 따라 다릅니다.

요청 메서드를 get으로 지정하는 객체와 요청을 보낼 URL을 지정하는 객체와 함께 axios() 메서드를 사용하여 GET 요청을 하는 방법 중 하나가 있습니다.

예:

 const axios = require("axios");

axios({
  method: "get",
  url: "https://jsonplaceholder.typicode.com/comments",
})
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
 

이 예에서는 .then() 및 .catch() 메서드를 체인으로 연결하여 비동기 프로그래밍 모델을 사용하여 프로미스를 생성합니다. 이 프로미스는 요청이 성공하면 콘솔에 응답을 기록하고 요청이 실패하면 오류 메시지를 기록합니다.

Axios는 또한 .get() 메서드를 axios 인스턴스에 체인으로 연결하여 객체를 전달할 필요가 없는 더 쉬운 GET 요청 방법을 제공합니다.

예:

 axios
  .get("https://jsonplaceholder.typicode.com/comments")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
 

Axios로 POST 요청하기

Axios로 POST 요청하기는 GET 요청하기와 유사합니다. 이 요청을 사용하여 서버로 데이터를 보낼 수 있습니다.

아래 코드 스니펫은 Axios의 .post() 메서드를 사용하는 방법의 예입니다.

 axios
  .post("https://jsonplaceholder.typicode.com/comments", {
    name: "Jackson Smith",
    email: "[email protected]",
    body: "This is a piece of art.",
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
 

이 코드는 새 댓글을 생성하기 위해 JSONPlaceholder API에 POST 요청을 보냅니다. axios.post 메서드는 /comments 엔드포인트로 데이터를 전송합니다.

요청에 전송된 데이터는 이름, 이메일, 본문 속성을 가진 객체입니다. 요청이 성공하면 then 메서드는 응답 데이터를 콘솔에 기록합니다. 오류가 발생하면 catch 메서드가 콘솔에 오류를 기록합니다.

Axios로 PUT/PATCH 요청하기

PUT 또는 PATCH 요청을 사용하여 서버의 기존 리소스를 업데이트할 수 있습니다. PUT은 전체 리소스를 교체하는 반면, PATCH는 지정된 필드만 업데이트합니다.

Axios로 PUT 또는 PATCH 요청을 하려면 각각 .put() 또는 .patch() 메서드를 사용해야 합니다.

다음은 이러한 메서드를 사용하여 ID가 100인 댓글의 이메일 속성을 업데이트하는 방법의 예입니다.

 const axios = require("axios");

axios
  .get("https://jsonplaceholder.typicode.com/comments/100")
  .then((res) => {
    console.log(res.data.email);
  })
  .catch((err) => {
    console.error(err);
  });

// Output:
// '[email protected]'

axios
  .patch("https://jsonplaceholder.typicode.com/comments/100", {
    email: "[email protected]",
  })
  .then((res) => {
    console.log(res.data.email);
  })
  .catch((err) => {
    console.error(err);
  });

// Output:
// '[email protected]',
 

이 프로그램은 먼저 엔드포인트 “https://jsonplaceholder.typicode.com/comments/100″로 GET 요청을 보냅니다. 그런 다음 ID가 100인 댓글의 이메일 속성을 콘솔에 기록합니다. PATCH 요청을 한 후 변경된 내용을 확인할 수 있도록 GET 요청을 하고 있습니다.

두 번째 요청은 동일한 엔드포인트에 대한 PATCH 요청입니다. 이 코드는 댓글의 이메일을 [email protected] 로 업데이트합니다.

Axios로 DELETE 요청하기

DELETE 요청을 사용하여 서버에서 리소스를 삭제할 수 있습니다.

.delete() 메서드를 사용하여 서버에서 리소스를 삭제하는 방법은 다음 예제를 참조하세요:

 axios
  .delete("https://jsonplaceholder.typicode.com/comments/10")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
//Output:
// {}
 

콘솔에 빈 객체를 로깅하면 위 코드에서 ID가 10인 댓글을 삭제한 것을 알 수 있습니다.

Axios로 동시 요청하기

Axios를 사용하여 여러 엔드포인트에서 한 번에 데이터를 가져올 수 있습니다. 이렇게 하려면 .all() 메서드를 사용해야 합니다. 이 메서드는 요청 배열을 매개변수로 받아들이고 모든 응답을 받을 때만 해결합니다.

다음 예제에서 .all() 메서드는 두 엔드포인트에서 동시에 데이터를 검색합니다.

 axios
  .all([
    axios.get("https://jsonplaceholder.typicode.com/comments?_limit=2"),
    axios.get("https://jsonplaceholder.typicode.com/posts?_limit=2"),
  ])
  .then(
    axios.spread((comments, posts) => {
      console.log(comments.data);
      console.log(posts.data);
    })
  )
  .catch((err) => console.error(err));
 

위의 코드 블록은 요청을 동시에 전송한 다음 응답을 .then() 메서드로 전달합니다. Axios의 .spread() 메서드는 응답을 분리하고 각 응답을 해당 변수에 할당합니다.

마지막으로 콘솔은 댓글과 게시물이라는 두 응답의 데이터 속성을 기록합니다.

Axios로 요청 가로채기

때로는 요청이 서버에 도착하기 전에 가로채야 할 수도 있습니다. 요청을 가로채기 위해 Axios의 interceptors.request.use() 메서드를 사용할 수 있습니다.

다음 예제에서 이 메서드는 모든 요청에 대해 요청 유형을 콘솔에 기록합니다:

 axios.interceptors.request.use(
  (config) => {
    console.log(`${config.method} request made`);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios
  .get("https://jsonplaceholder.typicode.com/comments?_limit=2")
  .then((res) => console.log(res.data))
  .catch((err) => console.error(err));
 

이 프로그램은 axios.interceptors.request.use 메서드를 사용하여 Axios 인터셉터를 정의합니다. 이 메서드는 구성 및 오류 객체를 인수로 받습니다. config 객체에는 요청 방법(config.method) 및 요청 URL(config.url)을 포함하여 요청에 대한 정보가 포함됩니다.

인터셉터 함수는 요청이 정상적으로 진행될 수 있도록 config 객체를 반환합니다. 오류가 있는 경우 함수는 거부된 프로미스 객체를 반환합니다.

마지막으로, 프로그램은 인터셉터 테스트를 요청합니다. 콘솔은 요청 유형(이 경우 GET 요청)을 기록합니다.

Axios에는 더 많은 기능이 있습니다

Axios를 사용하여 프로젝트에서 요청을 생성하고 가로채는 방법을 배웠습니다. 요청 변환 및 Axios 인스턴스 사용과 같은 다른 많은 기능을 JavaScript 개발자가 탐색할 수 있습니다. Axios는 JavaScript 애플리케이션에서 HTTP 요청을 만드는 데 여전히 선호되는 옵션입니다. 그러나 Fetch API도 살펴볼 수 있는 또 다른 좋은 옵션입니다.