VueJS ngày 6 VueJS triển khai API thông qua Axios

Tình hình hiện tại là có nhiều Frameworks có tích hợp API như là

Angular 2 có http module

Jquery có $.ajax

Còn đối với Vue 2 thì có http client mà trong trường hợp này mình sài Axios dễ sài và thao tác cực kì đơn giản.

Axios là 1 thư viện của Vue nó cũng là 1 http client (nom na là bạn truye cập vào 1 website bạn là 1 client và truy cập thông qua http)

Axios mặc định là dùng Promise và chạy trên cả máy khách và máy chủ(điều này giúp nó dể fetching data dễ dàng trong khi phía máy chủ đang render)

Nếu nó dùng dc Promise thì tức nghĩa nó cũng sẽ có async và await

Vô. cài đặt Axios như sao

bạn nào sài npm thì:

npm install axios --save

bạn nào sài Yarn thì:

yarn add axios

cài xong rồi tiếp 

Nếu đã dùng tới API thì chắc chắn sẽ có chứng thực không phải lúc nào mà cũng gọi khơi khơi được.

Axios cung cấp cho bạn khả năng tạo base instance. Điều này có ích trong việc gọi đến 1 server khác có authorization header

Ở ví dụ này mình tạo 1 file tên là http-common.js

Nội dung như sau:

Tiếp đến phải khai báo nó trong file main.js mới sài được cái Axios này

Theo cách trên thì mình có thể gọi Axios từ bất kì đâu.

chỉ cần là import {HTTP} from './http-common'

thay vì là axios.  giờ mình sẽ có HTTP.get() 

Hoặc là mình có thể gọi nó trực tiếp trong component luôn

Trong folder component chúng ta tạo 1 folder tên là CallAxios trong đó chúng ta tạo file GetExample.vue nội dung như sau:

Ở ví dụ này mình dùng hàm GET để lấy data từ API

rồi giờ đặt link của cái file mới này trong routes.js rồi chạy thử nào

Trong file App.vue mình sẽ thêm đường dẫn link tới cái path này và chạy thử nào

Ổn rồi đó là GET ngoài ra thì mình còn có PUT, PATCH, DELETE dữ liệu giờ mình sẽ sài POST để đẩy dữ liệu lên server cách làm như sau tạo 1 file mới tên PostExample.vue