Axios란? 뭘까?

Axios

axios는 Vue.js에서 HTTP 요청을 보내기 위한 인기있는 자바스크립트 라이브러리 중 하나입니다.
axios는 Promise 기반의 API를 제공하여 비동기식 HTTP 요청을 보내고 응답을 처리할 수 있습니다.

Vue.js와 함께 axios를 사용하면 Vue 컴포넌트에서 API 요청을 보내고 응답을 처리할 수 있습니다. 이를 통해 Vue.js 애플리케이션에서 서버와 통신하고 데이터를 가져올 수 있습니다.

axios는 다음과 같은 기능을 제공합니다.

Promise 기반 API
XMLHttpRequest (XHR) 요청을 보내거나 브라우저의 Fetch API를 사용하여 요청을 보낼 수 있습니다.
요청과 응답을 인터셉트하여 요청을 수정하거나 응답을 처리할 수 있습니다.
요청과 응답 데이터를 자동으로 직렬화하거나 역직렬화할 수 있습니다.
요청을 취소하거나 타임아웃을 설정할 수 있습니다.
axios는 Vue.js와 함께 사용하기에 적합한 라이브러리 중 하나이며, Vue.js 공식 문서에서도 axios를 추천하고 있습니다.

Axios 설치 방법

1. npm을 사용하여 axios를 설치합니다. 터미널 또는 명령 프롬프트에서 다음 명령어를 실행합니다.

npm install axios

2. Vue.js에서 axios를 사용할 수 있도록 main.js 파일에서 axios를 import합니다.

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)

app.config.globalProperties.$http = axios

app.mount('#app')

3. Vue 컴포넌트에서 axios를 사용할 수 있습니다.

export default {
  name: 'MyComponent',
  created () {
    this.$http.get('/api/data')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}