axios

axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.jsGitHub

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

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

설치

npm install axios

Component에서 사용

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

import axios from "axios";

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

Global 사용

axios를 Vue 전체 영역에서 사용하고 싶다면 Vue Application의 globalProperties에 등록해야 한다.

src/main.js

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

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

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

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

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

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

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

custom axios 기본 구성

/src/ajax/index.js 파일에는 axios 객체를 만들고 원하는 형태로 개조해서 export 하도록 코드를 구성한다.

import axios from "axios";

//axios에 필요한 기능 추가

export default axios;