[Vue] Axios

vs code Termenal

vscode 에서 axios 를 사용하여 비동기 처리하는 방식은 위와 같이 터미널 실행 후 npm 으로 axios 라이브러리를 다운받는다.

 

</template>

<script>

import axios from 'axios';

 

추가로 vue 스크립트 태그 내부에 위에서 설치한 axios 라이브러리를 import 시켜준다

(* 전체 App,vue 스크립트 로직)

<script>

import axios from 'axios';

import dataItem from './assets/dataItem';

import ContainerItem from './components/ContainerItem.vue';

export default {

  name: 'App',

  data() {

    return {

      dataItem: dataItem,

    }

  },

  props: {

    ContainerItem: ContainerItem,

  },

 

  components: {

    ContainerItem: ContainerItem,

  },

  methods: {

    more() {

      axios.get('https://codingapple1.github.io/vue/more1.json')

      .then(result => {

        console.log('data', result.data);

        this.dataItem.push(result.data);

      }).catch((err) => {

 

       

    },

  },

 

}

</script>

 

export 내에 methods: {비동기 처리 로직 구성} 에서 해당 로직을 구현하면 된다.

 

axios.get('서버에서 보낸 rest api url')

.then()...

 

Arrow Function 을 사용한 result then 메서드에서 this.dataItem.push() 를 통해 넘어온 새로운 데이터를 dataItem 배열에 추가한다.

 

현재 DataItem 은 초기 값으로 import 되어 있고 App.vue data() 속성에 정의되어 있으며, 이를 Container 컴포넌트에 props 로 전달하고 있는 방식이다.

 

전체 코드 동작 과정 

1) 부모 컴포넌트는 App.vue 의 data() 속성에 dataItem 이라는 데이터를 가지고 있다

<script>

import axios from 'axios';

import dataItem from './assets/dataItem';

import ContainerItem from './components/ContainerItem.vue';

export default {

  name: 'App',

  data() {

    return {

      dataItem: dataItem,

    }

  },

 

2) 자식 컴포넌트 ContainerItem 을 App.vue 의 컴포넌트에 담고 있다

 components: {

    ContainerItem: ContainerItem,

  },

 

3) 부모 컴포넌트에서 axios 를 통해 비동기로 데이터를 조회한다.

  methods: {

    more() {

      axios.get('https://codingapple1.github.io/vue/more1.json')

      .then(result => {

        console.log('data', result.data);

        this.dataItem.push(result.data);

      })

       

    },

  },

 

}

 

4) props 를 통해 자식 컴포넌트에 데이터를 전송하고 있다

export default {

  name: 'App',

  data() {

    return {

      dataItem: dataItem,

    }

  },

  props: {

    ContainerItem: ContainerItem,

  },

 

<template>

 

  <ContainerItem :dataItem="dataItem"/>

 

</template>

 

※ 부모 컴포넌트의 dataItem 이 업데이트되면, Vue 의 반응형 시스템 덕분에 해당 데이터를 사용하는 ContainerItem 컴포넌트도 자동으로 업데이트 된다. 따라서, more 메서드에서 추가된 데이터는 ContainerItem 에 전달되고 랜더링에 반영되는 것이다.

 

* Fetch API 와 Axios 차이점

이전 프로젝트를 진행하면서 대부분의 비동기 처리를 Fetch API 를 사용해서 구현하였으나 이번에 vue 를 배우면서 axios 라는 라이브러리를 처음 사용하게 되었는데 둘의 차이점이 거의 없다고 하였지만 그래도 궁금해서 찾아 보게 되었다.

 

구성 로직은 fetch api 와 거의 비슷하지만 axios 는 json 을 자동으로 파싱 해주기 때문에 더욱 편하고, fetch api 는  최신 브라우저에서 호환성 문제로 작동하지 않는 경우가 있다.

 

Fetch API 를 지원하지 않는 브라우저

Internet Explorer (모든버전) 에서 Fetch API 는 기본적으로 지원 되지 않는다

그 밖에도 Safari 10 이전버전, Android WebView 4.4 이전 버전 등 에서 지원되지 않는다.

 

Fetch API 지원 버전

 

구형 브라우저에서도 Fetch API 를 사용할 수 있도록 폴리필(polyfill) 이라는 것을 추가하여 사용할 수 있지만 폴리필에 대한 내용은 향후 자료를 찾아봐야겠다.