Vue.js REST API Consumption with Axios

Có khá nhiều framwork có xây dựng các HTTP API. Angular 2 có module http, jQuery có $.ajax, và cho đến khi Vue 2.0, Vue.js có vue-resource. Trong Vue 2.0, các nhà phát triển quyết định rằng xây dựng module http client là khá dư thừa và có thể tốt hơn bằng việc sử dụng thư viện của bên thứ 3. Giải pháp thay thế được khuyên dùng là Axios. Axios là một thư viện http client lớn. Nó sử dụng promises mặc định và chạy trên cả client và server. Nó là quá dễ để sử dụng với Vue. Sử dụng promises, bạn có thể kết hợp nó với async/await để rút gọn một cách tuyệt vời và dễ để sử dụng API, tôi sẽ chứng mình ở đây.

Installation

Axios nên được cài đặt từ npm hoặc yarn

# Yarn
$ yarn add axios

# NPM
$ npm install axios --save

Populating Data with a GET Request

Bạn có thể sử dụng Axios trực tiếp trong các component của bạn để lấy dữ liệu từ một method.

//file ExampleComponent.vue

<template>
  <ul v-if="posts && posts.length">
    <li v-for="post of posts">
      <p><strong>{{ post.title }}</strong></p>
      <p>{{ post.body }}</p>
    </li>
  </ul>

  <ul v-if="errors && errors.length">
    <li v-for="error of errors">
      {{ error.message }}
    </li>
  </ul>
</template>

<script>
import axios from 'axios';

export default {
  data: () => ({
    posts: [],
    errors: []
  }),

  // Fetches posts when the component is created.
  created() {
    axios.get('http://jsonplaceholder.typicode.com/posts')
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })

    // async / await version (created() becomes async created())
    //
    // try {
    //   const response = await axios.get('http://jsonplaceholder.typicode.com/posts')
    //   this.posts = response.data
    // } catch (e) {
    //   this.errors.push(e)
    // }
  }
}
</script>

Populating Data with a POST Request

Chúng ta có thể gửi các request POST, PUT, PATCH, và DELETE một cách dễ dàng.

//file ExampleComponent.vue

<template>
  <input type="text" v-model="postBody" @change="postPost()"/>
  <ul v-if="errors && errors.length">
    <li v-for="error of errors">
      {{ error.message }}
    </li>
  </ul>
</template>

<script>
import axios from 'axios';

export default {
  data: () => ({
    postBody: '',
    errors: []
  }),

  // Pushes posts to the server when called.
  postPost() {
    axios.post('http://jsonplaceholder.typicode.com/posts', {
      body: this.postBody
    })
    .then(response => {})
    .catch(e => {
      this.errors.push(e)
    })

    // async / await version (postPost() becomes async postPost())
    //
    // try {
    //   await axios.post('http://jsonplaceholder.typicode.com/posts', {
    //     body: this.postBody
    //   })
    // } catch (e) {
    //   this.errors.push(e)
    // }
  }
}
</script>

A Common Base Instance

Một tính năng thường xuyên bị bỏ qua nhưng rất hữu ích, Axios cung cấp là khả năng tạo ra một thể hiện cho phép bạn chia sẻ một URL chung và cấu hình trên tất cả các lần gọi đến. Điều này có ích nếu tất cả các lần gọi của bạn đến một server cụ thể, hoặc cần chia sẻ header, như một authorization header.

//file http-common.js
import axios from 'axios';

export const HTTP = axios.create({
  baseURL: 'http://jsonplaceholder.typicode.com/',
  headers: {
    Authorization: 'Bearer {token}'
  }
})

Bạn có thể sử dụng HTTP như này:

<script>
import {HTTP} from './http-common';

export default {
  data: () => ({
    posts: [],
    errors: []
  }),

  created() {
    HTTP.get('posts')
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Reference

Alligator vuejs rest-api-axios GitHub repository axios