Axios..🦄

axios 란?

브라우저 및 Node 환경에서 사용 가능한 Promise 기반의 HTTP 클라이언트,
주로 Rest API 통신에 사용, 간단한 API 를 통해 HTTP 요청을 할 수 있다!

주요 기능

• Promise 기능
  Axios는 비동기 처리를 위한 Promise 를 사용하며, .then().catch()를 통해 결과를 처리 할 수 있다
• 요청과 응답
  Axios 는 요청과 응답 데이터를 변환 할 수 있는 기능이 있다.
  transformRequest, transformResponse 를 통해 데이터를 가공 할 수 있다.
• 자동 JSON 변환👍🏻
  요청 데이터가 Object 일 경우 자동으로 JSON 으로 변환
  응답 데이터도 자동으로 Object로 변환
• interceptors⭐️
  요청이나 응답을 가로채서 추가적인 처리를 할 수 있는 interceptor 기능이 있다. 이를 통해 인증 토큰 추가, 오류 처리를 쉽게 할 수 있다.

• timeout
  일정 시간 요청 시간이 지나면 자동을 취소

설치 방법
npm install axios

 

get 요청

const axios = require('axios');

axios.get('URL')
.then(result => {
  console.log(result)
})catch(err => {console.log(err)})

post 요청

const data ={
  name: 'cho',
  email:"asd123@example.com"
}
axios.post('URL',data)
.then(result => {
  console.log(result)
})catch(err => {console.log(err)})

header 설정

axios
  .get("https://api.example.com/data", {
    headers: {
      Authorization: "Bearer your_token_here",
    },
  })
  .then()
  .catch();

intercepter 기능
1. 요청 인터셉터 : 서버에 요청을 보내기 전에 요청을 수정 할 수 있다.예를 들어 인증 토큰을 헤더에 추가하여 요청을 데이터를 변환하는 데 사용
2. 응답 인터센터 : 서버로부터 응답 받은 후, 응답 데이터를 처리하거나 오류를 처리 할 수 있다.특정 오류를 처리하거나 응답 데이터를 변환

Request intercepte 

const axios = require("axios");

// 요청 인터셉터 설정
axios.interceptors.request.use(
  (config) => {
    // 요청 전에 토큰 추가
    const token = "your_token_here";
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    console.log("Request sent with config:", config);
    return config; // 요청을 계속 진행
  },
  (error) => {
    // 요청 오류 처리
    return Promise.reject(error);
  }
);

Response intercepter

// 응답 인터셉터 설정
axios.interceptors.response.use(
  (response) => {
    // 응답 데이터를 가공
    console.log("Response received:", response);
    return response.data; // 응답 데이터만 반환
  },
  (error) => {
    // 오류 처리
    if (error.response) {
      console.error("Error response:", error.response);
      // 예: 401 에러 처리
      if (error.response.status === 401) {
        console.error("Unauthorized! Redirecting to login...");
        // 로그인 페이지로 리다이렉트하는 코드 작성
      }
    }
    return Promise.reject(error); // 오류를 다시 던짐
  }
);

 

사용 사례

1. 인증 토큰 자동 추가: 모든 요청에 대해 인증 토큰을 자동으로 추가하는 데 사용됩니다. 사용자가 로그인하면 토큰을 저장하고, 이후 모든 요청에서 이 토큰을 헤더에 추가할 수 있습니다.
2. 응답 데이터 변환: 서버로부터 받은 응답 데이터를 특정 형식으로 변환하거나 가공할 수 있습니다. 예를 들어, API에서 반환하는 데이터를 특정 구조로 변환하여 애플리케이션에서 쉽게 사용할 수 있도록 합니다.
3. 오류 처리: API 요청에서 발생할 수 있는 다양한 오류를 중앙에서 처리할 수 있습니다. 예를 들어, 특정 HTTP 상태 코드에 따라 사용자에게 알림을 표시하거나 다른 작업을 수행할 수 있습니다.
4. 로깅 및 모니터링: 모든 요청과 응답을 로깅하여 애플리케이션의 동작을 모니터링할 수 있습니다. 이를 통해 문제를 조기에 발견하고 디버깅에 도움을 줄 수 있습니다.
5. 요청 취소: 대량의 요청이 동시에 이루어지는 상황에서 이전 요청을 취소할 수 있는 로직을 추가하여 불필요한 네트워크 트래픽을 줄이는 데 사용할 수 있습니다