2024/06/11 axios

axios란?

• 자바스크립트 기반의 HTTP 클라이언트 라이브러리로,
  http를 이용해서 서버와 통신하기 위해 사용하는 패키지

설치

• yarn add axios
  or
• npm install axios

불러오기

• import axios from 'axios';

---

axios특징

1. Promise 기반

• Axios는 Promise 기반의 API를 제공하여 비동기 처리를 쉽게 할 수 있다.
• async/await 문법을 사용할 수 있음

2. JSON 데이터 자동 변환

• Axios는 요청과 응답 데이터를 자동으로 JSON 형태로 변환.
• 따라서 별도의 JSON 변환 작업이 필요없음.

3. 취소 기능

• Axios는 요청을 취소할 수 있는 기능을 제공.
• 이는 특히 사용자가 요청을 취소하거나 네트워크 연결이 끊어졌을 때 유용.

4. 요청/응답 인터셉터

• Axios는 요청과 응답에 대한 인터셉터를 제공
• 요청 또는 응답을 가로채서 전처리/후처리를 할 수 있음.

---

사용예시

GET - 조회

• 서버의 데이터를 조회하고 가져올때 사용
  ex) 게시글 목록 조회, 사용자 정보 가져오기등

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

POST - 생성

• 새로운 리소스를 생성하거나 데이터를 서버에 추가하는 경우에 사용
  ex) 새 사용자 등록, 게시글 작성 등

axios.post('/api/users', {
  name: 'John Doe',
  email: 'john@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

DELETE - 삭제

• 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때
  ex) 사용자 계정 삭제, 게시글 삭제 등

axios.delete('/api/users/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

PATCH - 수정

• 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드
  ex) 사용자 정보 일부 수정, 게시글 내용 일부 수정 등

axios.patch('/api/users/1', {
  name: 'John Smith'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Axios 인터셉터

• 요청과 응답에 대한 인터셉터를 제공.
  이를 통해 요청/응답을 가로채서 전처리 또는 후처리를 할 수 있음.

요청 인터셉터

• 요청을 보내기 전에 요청 데이터를 수정하거나, 헤더를 설정할 수 있음.

axios.interceptors.request.use(
  config => {
    // 요청 데이터 수정
    config.data.token = 'my_token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

응답 인터셉터 사용

• 서버로부터 받은 응답 데이터를 가공하거나, 에러를 처리할 수 있음

axios.interceptors.response.use(
  response => {
    // 응답 데이터 가공
    response.data = response.data.map(item => item.toUpperCase());
    return response;
  },
  error => {
    // 에러 처리
    if (error.response.status === 401) {
      // 토큰 만료 처리
    }
    return Promise.reject(error);
  }
);

Axios 요청 취소

• 요청을 취소할 수 있는 기능을 제공.
  사용자가 요청을 취소하거나, 네트워크 연결이 끊어졌을 때 유용

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/users', {
  cancelToken: source.token
})
.then(response => {
  console.log(response.data);
})
.catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 다른 에러 처리
  }
});

// 요청 취소
source.cancel('Operation canceled by the user.');

---

사용시 주의사항

1. 크로스 도메인 이슈

• Axios는 기본적으로 같은 도메인에서만 요청을 보낼 수 있음.
• 다른 도메인으로 요청을 보낼시 CORS 설정 필요

2. 보안 이슈

• 기본적으로 보안을 고려하지 않음.
• 중요한 데이터를 전송할 때는 HTTPS 프로토콜을 사용하는걸 권장

3. 에러 처리

• 각 상황에 맞는 적절한 에러 처리가 필요

4. 성능 이슈

• Promise 기반으로 동작하므로, 여러 개의 요청이 동시에 발생할 경우 성능 저하가 발생
• Promise.all()이나 async/await 등을 사용하여 요청을 효율적으로 관리필요.