Tiêu thụ API Vue.js REST với Axios

---

Khá nhiều framework có API HTTP tích hợp sẵn. Angular 2 có module http , JQuery có $ .ajax và cho đến Vue 2.0 , Vue.js đã có vue-resource . Trong Vue 2.0 , các nhà phát triển quyết định rằng việc tích hợp module client http là khá dư thừa và có thể được các thư viện bên thứ ba phục vụ tốt hơn. Giải pháp thay thế thường được đề xuất nhất là Axios .

Axios là một thư viện khách hàng http tuyệt vời. Nó sử dụng các lời hứa theo mặc định và chạy trên cả client và server (điều này làm cho nó thích hợp để tìm nạp dữ liệu trong quá trình kết xuất phía server ). Nó cũng khá dễ sử dụng với Vue. Bởi vì nó sử dụng các hứa hẹn, bạn có thể kết hợp nó với async / await để có được một API ngắn gọn và dễ sử dụng đáng kinh ngạc, như tôi sẽ trình bày ở đây.

Cài đặt

Axios nên được cài đặt từ NPM hoặc Yarn:

# Yarn
$ yarn add axios

# NPM
$ npm install axios --save

Điền dữ liệu với yêu cầu GET

Mặc dù nó thường kém thực tiễn, bạn có thể sử dụng Axios trực tiếp trong các thành phần của bạn để tìm nạp dữ liệu từ một phương thức, vòng đời hook hoặc khi nào.

<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() {
    return {
      posts: [],
      errors: []
    }
  },

  // Fetches posts when the component is created.
  created() {
    axios.get(`http://jsonplaceholder.typicode.com/posts`)
    .then(response => {
      // JSON responses are automatically parsed.
      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>

Đẩy dữ liệu bằng yêu cầu ĐĂNG

Người ta có thể gửi các yêu cầu POST, PUT, PATCH và DELETE một cách dễ dàng.

(Lưu ý, đó là một ý tưởng tồi nếu gửi yêu cầu trên mọi sự kiện đầu vào, ít nhất là thực hiện một số điều chỉnh hoặc gỡ lỗi .)

<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() {
    return {
      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>

Một trường hợp cơ sở chung

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

import axios from 'axios';

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

Đến đây bạn có thể sử dụng HTTP như vậy,

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

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

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

Tài liệu tham khảo

Đó chỉ là bề nổi của những gì Axios có thể làm. Xem kho lưu trữ GitHub để biết thêm thông tin và tài liệu.

---

---

Các tin liên quan