# axios

## axios

{% embed url="<https://github.com/axios/axios>" %}

axios는 node JS 환경을 위한 Promise 기반 비동기 통신 클라이언트 라이브러리이다.

이 문서에서는 Vue-cli project에서 axios를 효율적으로 사용하기 위한 방법에 대해서 살펴본다.

### 설치

```bash
npm install axios
```

### Component에서 사용

Vue Component에서 axios를 사용하고 싶다면 script 상단에 import 구문을 작성하여 불러오면 된다.

```javascript
import axios from "axios";
```

이 경우 장점은 화면마다 비동기 통신 방식을 개별적으로 지정할 수 있다는 것이고, 단점은 로딩 화면 등 일괄 처리해야 하는 항목들을 구현할 수 없다는 것이다.

### Global 사용

axios를 Vue 전체 영역에서 사용하고 싶다면 Vue Application의 <mark style="color:blue;">globalProperties</mark>에 등록해야 한다.

{% code title="src/main.js" %}

```javascript
//vue app 생성
const app = createApp(App);

//vue global properties 등록
//app.config.globalProperties["name"] = value;
//app.config.globalProperties.name = value;

//vue app 화면 연결
app.mount("#app");
```

{% endcode %}

이곳에 우리가 원하는 방향으로 개조한 axios 객체를 등록한다.

```javascript
import axios from "./ajax";
app.config.globalProperties.$http = axios;
```

이 때, 폴더의 구조는 다음과 같이 구성한다.

```
src
 +-- main.js
 +-- ajax
       +-- index.js
```

### custom axios 기본 구성

<mark style="color:blue;">`/src/ajax/index.js`</mark> 파일에는 <mark style="color:blue;">`axios`</mark> 객체를 만들고 원하는 형태로 개조해서 <mark style="color:red;">`export`</mark> 하도록 코드를 구성한다.

```javascript
import axios from "axios";

//axios에 필요한 기능 추가

export default axios;
```