코드를 천천히 읽고 필요에 따라 정보 흐름과 정보 형식이 변경되는 대로 따르세요.

개요

Axios는 브라우저와 Node.js 모두에서 HTTP 요청을 만드는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. 비동기 HTTP 요청을 REST 엔드포인트로 보내고 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 수행하는 프로세스를 단순화하도록 설계된 오픈 소스 프로젝트입니다.

창조자

Axios는 Matt Zabriskie가 만들었습니다. 이 프로젝트는 커뮤니티에서 유지 관리하며 GitHub에서 사용할 수 있습니다.

수혜자

Axios는 다음과 같은 이점을 제공합니다:

• 프런트 엔드 개발자: 웹 애플리케이션에서 HTTP 요청을 만드는 데 사용됩니다.
• 백엔드 개발자: Node.js 애플리케이션 내에서 HTTP 요청을 통합합니다.
• 풀 스택 개발자: 클라이언트 측과 서버 측 모두에서 HTTP 요청을 처리합니다.

장점

1. 약속 기반: 비동기식 요청 및 응답 작업을 더 쉽게 만듭니다.
2. 인터셉터: 요청이나 응답이 처리되기 전에 수정을 허용합니다.
3. 자동 JSON 데이터 변환: JSON 데이터 처리를 단순화합니다.
4. CSRF 보호: 교차 사이트 요청 위조 방지에 도움이 됩니다.
5. 요청 및 응답 변환: 요청 및 응답의 사용자 정의 변환.
6. 오류 처리: 다른 방법에 비해 오류 처리가 단순화되었습니다.
7. 광범위한 브라우저 지원: 모든 최신 브라우저와 Node.js에서 작동합니다.

용법

사용되는 곳

• 웹 애플리케이션: 백엔드 서비스와 통신합니다.
• Node.js 애플리케이션: 다른 API 또는 서비스에 HTTP 요청을 수행합니다.
• 모바일 애플리케이션: React Native와 같은 프레임워크의 일부로.

실패하는 곳

1. 과중한 애플리케이션: 메모리 소비로 인해 매우 큰 데이터 전송에는 적합하지 않을 수 있습니다.
2. 브라우저 제한: CORS가 제대로 처리되지 않는 한 동일 출처 정책 제한이 적용됩니다.
3. 종속성 크기: 관리할 추가 종속성으로, 최소한의 프로젝트에서 문제가 될 수 있습니다.

사용되는 이유

• 사용 편의성: HTTP 요청을 수행하기 위한 간단한 API.
• 유연성: 쉽게 구성하고 확장할 수 있습니다.
• 커뮤니티 지원: 폭넓은 채택과 폭넓은 커뮤니티 지원.

사용되지 않는 이유

• 라이브러리 크기: 다른 종속성을 추가하는 오버헤드.
• 대안: Fetch API 또는 요청이나 슈퍼에이전트와 같은 기타 라이브러리를 선호합니다.

사용 방법

설치

npm install axios

기본 사용법

const axios = require('axios');

// Performing a GET request
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

댓글을 통한 자세한 사용법

const axios = require('axios');

// Create an instance of axios with default settings
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

// Interceptor to log request details
instance.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
});

// Interceptor to log response details
instance.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

// Making a POST request
instance.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });

오용 사례

1. 오류 처리 무시: 오류를 제대로 처리하지 않으면 애플리케이션 충돌이 발생할 수 있습니다.

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  });
// Error handling should not be omitted

1. 동기 요청으로 코드 차단: Axios는 동기 요청을 지원하지 않으므로 동기 동작을 기대하는 방식으로 사용하는 것은 올바르지 않습니다.

행동 양식

인스턴스 메소드

• 축(구성)
• axios(url[, config])

요청 방법

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

편의 방법

• axios.all(반복 가능)
• axios.spread(콜백)

인스턴스 생성

• axios.create([config])

인터셉터

• axios.interceptors.request.use(onFulfilled[, onRejected[, options]])
• axios.interceptors.response.use(onFulfilled[, onRejected[, options]])

구성 기본값

• axios.defaults

취소

• axios.취소
• axios.CancelToken
• axios.is취소

결론

Axios는 JavaScript 애플리케이션에서 HTTP 요청을 만들기 위한 강력하고 사용하기 쉬운 라이브러리입니다. 요청 및 응답 차단, 자동 JSON 변환, 약속 기반 아키텍처와 같은 기능을 갖춘 강력한 API를 제공합니다. 그러나 잠재적인 함정을 피하려면 한계를 이해하고 적절하게 사용하는 것이 중요합니다.