Axios - 웹개발 JavaScript 강력한 HTTP 클라이언트 라이브러리

ㅁ Axios란?

Axios는 JavaScript 및 TypeScript에서 사용되는 간단하고 강력한 HTTP 클라이언트 라이브러리입니다. Axios는 주로 Vue.js 및 React 등의 프런트엔드 프레임워크와 함께 사용되며, Node.js에서도 HTTP 요청을 수행하고 응답을 처리하는데 사용됩니다.

서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

ㅁ Axios의 주요 특징과 기능

1. 간편한 API 요청:

2. 비동기적인 패턴을 쉽게 사용

3. 요청과 응답 변환 인터셉터 제공

4. 요청 설정 옵션 지원

5. CSRF 보호 지원

6. HTTP 상태 코드 처리

7. 요청 취소하거나 중단 기능 지원

---

1. 간편한 API 요청: Axios는 간단하고 직관적인 API를 제공합니다. HTTP 요청을 보내려면 단순히 axios 객체를 생성하고 원하는 메서드(GET, POST 등)를 호출하면 됩니다.

const axios = require('axios'); // GET 요청 axios.get('https://api.example.com/data') .then(response => console.log(response.data)) .catch(error => console.error(error));

​

2. Promise 기반 비동기적인 패턴을 쉽게 사용 : Axios는 Promise를 기반으로 하는 비동기적인 패턴을 사용합니다. 이는 .then() 및 .catch()와 같은 Promise 메서드를 사용하여 비동기 코드를 쉽게 처리할 수 있게 해줍니다.

3. 요청과 응답 변환 인터셉터 제공: Axios는 요청과 응답을 변환하기 위한 인터셉터(interceptor)를 제공합니다. 이를 사용하여 요청이나 응답의 데이터를 변환하거나 수정할 수 있습니다.

4. 요청 설정 옵션 지원 : Axios는 다양한 요청 설정 옵션을 지원합니다. 이를 통해 헤더, 타임아웃, 인증 등과 관련된 설정을 쉽게 조정할 수 있습니다.

axios.post('https://api.example.com/data', { key: 'value' }, { headers: { 'Content-Type': 'application/json' }, timeout: 5000 // 5초 타임아웃 설정 });

5. CSRF 보호 지원: Axios는 CSRF(Cross-Site Request Forgery) 공격으로부터 보호하기 위해 헤더에 토큰을 추가하는 등의 메커니즘을 제공합니다.

6. HTTP 상태 코드 처리: Axios는 HTTP 상태 코드에 따라 다양한 처리를 제공합니다. 예를 들어, 특정 상태 코드에 따라 자동으로 리다이렉트를 처리하거나, 에러 핸들링을 할 수 있습니다.

7. 요청 취소하거나 중단 기능 지원: Axios는 요청을 취소하거나 중단하는 기능을 지원합니다. 이는 타임아웃 또는 특정 조건에 따라 요청을 취소할 수 있게 해줍니다.

Axios 사용

​

npm 사용하기:

npm install axios

jsDelivr CDN 사용하기:

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

​

---

비동기 Promise(프로미스)는

* Promise(프로미스)는 JavaScript에서 비동기 작업을 다루기 위한 객체입니다. 주로 비동기 코드를 더 효과적으로 다루기 위해 사용됩니다. Promise는 비동기 작업의 성공 또는 실패와 같은 최종 완료 상태에 대한 대기 중인 객체를 나타냅니다.

1) 대기(Pending): 비동기 작업이 완료되지 않은 초기 상태입니다.

2) 이행(Fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다.

3) 거부(Rejected): 비동기 작업이 실패한 상태입니다.

예시 - 비동기 처리를 위한 Promise 

[성공적인 업무 완수, '이행된 약속'의 예 ]

1. new Promise 실행자는 에 의해 자동으로 즉시 호출됩니다.

​

2. 실행자는 resolve와 reject 두 가지 인수를 받습니다. 이러한 함수는 JavaScript 엔진에 의해 사전 정의되므로 생성할 필요가 없습니다. 준비가 되면 그 중 하나만 호출해야 합니다.

​

3. 1초 (1000ms) 의 "처리" 후에 실행자는 resolve("done")결과 생성을 호출합니다. 그러면 promise 객체의 상태가 변경됩니다.

let promise = new Promise(function(resolve, reject) { // the function is executed automatically when the promise is constructed // after 1 second signal that the job is done with the result "done" setTimeout(() => resolve("done"), 1000); });

​

​

[실행자가 오류로 인해 Promise를 거부하는 예]

​

1. 실행자는 작업(보통 시간이 걸리는 작업)을 수행한 다음 해당 Promise 개체의 상태를 호출 resolve하거나 reject로 변경해야 합니다.

2. 처음에 "보류 중인" Promise와 달리 해결되거나 거부된 Promise를 "settled"라고 합니다

let promise = new Promise(function(resolve, reject) { // after 1 second signal that the job is finished with an error setTimeout(() => reject(new Error("Whoops!")), 1000); });

​

​

실행자는 resolve와 reject 둘 중 하나만 호출해야 합니다 . 두개 이상 사용하면 하나는 무시됩니다.