Vue에서 Axios 사용하는 방법

Vue

Axios란 무엇인가?

axios란, Pormise 기반의 http 통신을 위한 클라이언트 라이브러리이다.

vue에는 vue-resource라는 것이 있으나, 2016년 9월 이후 업데이트가 되어있지않고, Evan You(Vue 만든사람) 또한, 공식적으로 추천하지 않고, axios 쓰는 것을 추천한다.


Axios 설치하기

npm으로 axios를 설치한다.

npm install axios vue-axios


Axios 등록하기

Vue 애플리케이션을 개발할 때, Vuex(store.js)의 actions에서 axios를 사용하므로, store.js에 axios를 등록한다.

1
2
3
4
5
6
7
8
9
10
11
// store.js
import Vue from 'vue'
import Vuex from 'vuex'

// axios & vue-axios를 import
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex);
// axios & vue-axios를 등록
Vue.use(VueAxios, axios);


Axios 사용하기

1. JSON server 만들기

가상의 서버에서 데이터를 만들어 사용하기 위해, 프론트엔드 개발자가 직접 JSON server를 구축하여, axios 통신을 테스트할 수 있다.

npm install -g json-server


2. JSON server 만들기

JSON server에 가상 데이터를 만들기 위해, db.json 파일을 src 폴더 아래에 만들고, 다음과 같이 데이터를 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// db.json
{
    "todos": [
      {
         "id": "1",
         "text": "vue",
         "completed": false
      },
      {
          "id": "2",
          "text": "react",
          "completed": false
      },
      {
          "id": "3",
          "text": "angular",
          "completed": true
      },
      {
          "id": "4",
          "text": "python",
          "completed": false
      }
       ]
  }


3. JSON server 띄우기(Running)

json-server --watch src/db.json --port 4000


4. Vuex(store.js)의 actions에 메소드 등록하기

actions에 등록하고, 등록할 때, mutations를 commit하여 변경된 상태를 추적가능하게 하면 된다.

서버와 통신을 할 때, CRUD라는 것이 있는데, todo 앱과 비교하면 다음과 같다.

  • Create: addTodo
  • Read: getTodo
  • Update: changeTodo(toggle)
  • Delete: deleteTodo

Vuex(store.js)의 actions에 메소드 등록할 때, 위에 4가지로 나눠서 코드를 작성해보자.


<1>. Create: addTodo

Create는 클라이언트단에서 데이터를 새로 생성하여, 서버에 추가하는 것이다. todo 앱에서는 addTodo가 된다.

Vuex(store.js)의 actions에 메소드 등록할 때, axios의 post를 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// store.js
actions: {
  addTodo: function(context, payload) {
    // post를 사용할 때는, 요청할 uri에 보낼 데이터를 같이 요청한다.
    axios.post('http://localhost:4000/todos', {
        id: 4,
        text: payload,
        completed: false
    })
        // 요청이 성공하면, mutations에 commit을 하여, 원래 데이터에 요청한 데이터를 추가한다.
        .then((res) => {
            console.log(res);
            context.commit('addTodo', res.data)
        })
        // 요청이 실패하면, 에러에 대한 조치를 취한다.
        .catch((err) => {
            console.log(err);
        })
  }
}

actions에서 commit한 mutations에 로직을 작성한다.

1
2
3
4
5
mutations: {
  addTodo (state, todo) {
    state.todoList = [...state.todoList, todo]
  }
}


<2>. Read: getTodo

Read는 클라이언트단에서 데이터를 서버에 요청하여, 데이터를 받는 것이다. todo 앱에서는 getTodo가 된다.

Vuex(store.js)의 actions에 메소드 등록할 때, axios의 get을 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// store.js
actions: {
  getTodo: function(context) {
    // get을 사용할 때는, 요청할 uri를 작성한다.
    axios.get('http://localhost:4000/todos')
        // 요청이 성공하면, mutations에 commit을 하여, 원래 데이터에 요청받은 데이터를 할당한다.
        .then((res) => {
            console.log(res);
            context.commit('getTodo', res.data)
        })
        // 요청이 실패하면, 에러에 대한 조치를 취한다.
        .catch((err) => {
            console.log(err);
        })
  }
}

actions에서 commit한 mutations에 로직을 작성한다.

1
2
3
4
5
mutations: {
  getTodo (state, data) {
    state.todoList = data;
  }
}


<3>. Update: changeTodo(toggle)

Update는 클라이언트단에서 기존에 있던 데이터를 서버에 요청하여, 데이터를 변경하는 것이다. todo 앱에서는 toggle이 된다.

Vuex(store.js)의 actions에 메소드 등록할 때, axios의 patch를 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// store.js
actions: {
  toggle: function(context, payload) {
    // patch를 사용할 때는, 요청할 uri에 변경할 데이터의 uri를 붙여서 보낸다. 예를 들어, /todos/id가 올 수 있다.
    axios.patch(`http://localhost:4000/todos/${payload}`)
        // 요청이 성공하면, mutations에 commit을 하여, 특정 데이터가 변경된 상태로 데이터가 변경된다.
        .then((res) => {
            console.log(res);
            context.commit('toggle', payload)
        })
        .catch((err) => {
            console.log(err);
        })
  },
}

actions에서 commit한 mutations에 로직을 작성한다.

1
2
3
4
5
6
mutations: {
  toggle (state, id) {
    const index = state.todolist.findIndex((item)=>item.id === id);
    state.todolist[index].completed = !this.todolist[index].completed;
  },
}


<4>. Delete: deleteTodo

Update는 클라이언트단에서 기존에 있던 데이터를 서버에 요청하여, 데이터를 변경하는 것이다. todo 앱에서는 toggle이 된다.

Vuex(store.js)의 actions에 메소드 등록할 때, axios의 patch를 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// store.js
actions: {
  deleteTodo: function(context, payload) {
    // delete를 사용할 때는, 요청할 uri에 제거할 데이터의 uri를 붙여서 보낸다. 예를 들어, /todos/id가 올 수 있다.
    axios.delete(`http://localhost:4000/todos/${payload}`)
        // 요청이 성공하면, mutations에 commit을 하여, 특정 데이터가 지워진 상태로 데이터가 변경된다.
        .then((res => {
            console.log(res);
            context.commit('deleteTodo', payload)
        }))
        .catch((err) => {
            console.log(err);
        })
  }
}

actions에서 commit한 mutations에 로직을 작성한다.

1
2
3
4
5
6
7
mutations: {
  deleteTodo (state, id) {
    state.todoList = state.todoList.filter((t) => {
        return t.id !== id
    })
  }
}