- vừa được xem lúc

[Vue.js] Triển khai REST API sử dụng Axios

0 0 32

Người đăng: Ngoan Nguyen

Theo Viblo Asia

Hiện tại có rất nhiều Frameworks có tích hợp HTTP APIs như Angular 2 có http module, JQuery có $.ajax và Vue.js 2.0 có vue-resource. Nhưng trong Vue 2.0 thì các developer đã cho rằng http client module đó là dư thừa và có 1 thư viện bên thứ ba hỗ trợ tốt hơn đó chính là Axios.

Axios là một thư viện http client (HTTP client là gì các bạn? Nói nôm na ví dụ bạn muốn truy cập vào một website nào đó thì bạn chính là một client ) tuyệt vời. Nó sử dụng mặc định Promise và chạy trên cả máy khách và máy chủ (điều này làm cho nó thích hợp để fetching data trong khi phía máy chủ đang render). Nó rất dễ sử dụng với Vue. Vì sao, bởi vì nó sử dụng Promise, bạn có thể kết hợp nó với async/await, đó chính là nội dung của bài viết này ?

Nếu bạn nào chưa biết Promise là gì thì hãy đọc qua bài viết này nhé: https://kipalog.com/posts/Promise-la-khi-gi-

Cài đặt

Bạn nên dùng NPM hoặc Yarn để cài đặt Axios

# Dùng Yarn
$ yarn add axios # Dùng NPM
$ npm install axios --save

Sử dụng GET method để lấy dữ liệu

Bạn có thể sử dụng Axios trực tiếp trong các component của bạn để tìm nạp dữ liệu từ một phương thức, lifecycle hook hoặc bất cứ khi nào.

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() { return { posts: [], errors: [] } }, // lấy dữ liệu khi component được tạo thành công created() { axios.get(`http://jsonplaceholder.typicode.com/posts`) .then(response => { this.posts = response.data }) .catch(e => { this.errors.push(e) }) }
}
</script>

Sử dùng method POST để gửi dữ liệu

Chúng ra cũng có thể sử dụng method PUT, PATCHDELETE.

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() { return { postBody: '', errors: [] } }, // Gửi request lên server khi mà postPost() được gọi postPost() { axios.post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then(response => {}) .catch(e => { this.errors.push(e) }) }
}
</script>

Khởi tạo Base Instance chung

Cái này thường được bỏ qua nhưng nó rất hữu ích mà Axios cung cấp khả năng có thể tạo base instance và nó cho phép bạn chia sẻ một base URL và cấu hình trên tất cả nơi gọi tới instance đó. Điều này có ích nếu bạn có gọi đến một server cụ thể hoặc cần chia sẻ tiêu đề, chẳng hạn như authorization header.

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ể dụng nó như sau:

<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>

Kết luận và tài liệu tham khảo

Đó là những điều cơ bản nhất mà Axios có thể làm và nó có thể làm được nhiều thứ nó kinh khủng hơn.

Xem thêm thông tin tại GitHub https://github.com/mzabriskie/axios

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 373

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 689

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 334

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 417

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413