Các website lớn hiện nay đều cung cấp mạng lưới hệ thống API hỗ trợ cho tất cả chúng ta có thể viết các ứng dụng tương tác, ví dụ như với social Facebook, Google tất cả chúng ta đều có những API để thực hiện các tương tác. Ở Việt nam một số các trang thương nghiệp điện tử lớn đã và đang mở màn cung cấp các RESTfull API như Lazada, Sendo… hay mạng lưới hệ thống phát triển mở của FPT cũng sẽ có những API được cho phép bạn thực hiện. Các mạng lưới hệ thống API này còn có thể sử dụng xác thực mở OAuth 2 hoặc cũng sẽ có thể không cấp thiết. Tất cả chúng ta hoàn toàn có thể tạo ra các ứng dụng để thao tác với những mạng lưới hệ thống API này thông việc gọi tới những API được cung cấp sẵn.

Bạn Đang Xem: Axios là gì, xây dựng ứng dụng khai thác tin sử dụng Vue.js và axios

1.1 Axios là gì?

Axios là một HTTP client dựa được phát triển trên đối tượng người dùng Javascript Promise, nó có thể sử dụng trong các ứng dụng font-end Vue.js, React, Angular… Sử dụng Axios dễ dàng gửi đi các request HTTP dị đồng bộ tới những REST endpoint và thực hiện các chức năng CRUD. Tất cả chúng ta gặp phải một số khái niệm có thể nhiều bạn chưa nghe biết:

HTTP client là có thể là phần mềm, thư viện có thể thực hiện các yêu cầu (request) dạng HTTP đến sever HTTP và nhận về các hồi đáp (reponse). Đơn giản hơn chúng ta cũng có thể coi nó gần với một trình duyệt web.

Javascript Promise là một đối tượng người dùng giúp kiểm soát kết quả hoàn thành hay thất bại của một hành động dị đồng bộ trong Javascript (Tham khảo thêm Tri thức về Javascript Promise). Vue.js, React, Angular là những framework Javascript hiện giờ đang rất hot, giúp xây dựng những ứng dụng font-end linh hoạt hoạt động nhanh và mạnh mẽ.

REST endpoint là những điểm (URL) cung cấp các chức năng API được cho phép tất cả chúng ta tương tác với một mạng lưới hệ thống, ví dụ khi tất cả chúng ta muốn tương tác với Lazada tất cả chúng ta có thể gửi các request HTTP tới những REST API do Lazada cung cấp.

CRUD viết tắt của Create, Read, Update, Delete là một thuật ngữ lập trình nói đến 4 phương thức thân thuộc khi thao tác với kho tài liệu.

Tóm lại Axios là một “trình duyệt” trong Javascript giúp tất cả chúng ta thực hiện thao tác với những website hoặc API giúp xây dựng những ứng dụng font-end linh hoạt mạnh mẽ hơn.

1.2 Thiết lập Axios

Thư viện axios có thể thiết lập thông qua phương tiện npm:

npm install axios

Hoặc chèn đường dẫn file Javascript trên các CDN:

<script src=”https://unpkg.com/axios/dist/axios.min.js”></scriptvàgt;

Nếu như khách hàng sử dụng framework Laravel, thư viện Axios đã được thiết lập sẵn trong file resourcesassetsbootstrap.js:

/** * We’ll load the axios HTTP library which allows us to easily issue requests * to our Laravel back-end. This library automatically handles sending the * CSRF token as a header based on the value of the “XSRF” token cookie. */ window.axios = require(‘axios’); window.axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’;

và chỉ việc thực hiện npm install để thiết lập các gói đã được thiết lập sẵn.

1.3 Các phương thức của axios

1.3.1 Phương thức gửi yêu cầu HTTP

Các phương thức HTTP thường sử dụng nhiều nhất để khai thác tài liệu là GET và POST. Axios có hai phương thức để thực hiện GET và POST tài liệu.

Xem Thêm : Gems là gì? Tìm hiểu đồng GEM coin tiềm năng nhất hiện nay

axios.get(‘http://demo.com/user?ID=12345’) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

Đoạn mã này gửi một request với phương thức GET đến URL http://demo.com/user?ID=12345, nếu thành công kết quả sẽ tiến hành in ra console trong .then() và nếu lỗi thì in lỗi ra console trong .catch(). Bạn cũng có thể tưởng tượng nó giống như việc bạn mở trình duyệt ra, gõ vào đường dẫn cần đến và chờ, nếu thông tin được hiển thị các bạn sẽ đọc được, nếu không một thông tin lỗi hiển thị lên trên trình duyệt. Lưu ý, thông số truyền vào (query string) có thể đưa vào phần thông số như sau:

axios.get(‘http://demo.com/user’, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

Tiếp theo tất cả chúng ta xem gửi tài liệu với phương thức POST đến một URL thế nào:

axios.post(‘http://demo.com/user’, { name: ‘TuandungB’, email: ‘tuandungb@demo.com’, password: ‘123456’ }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

Đoạn code trên thực hiện giống như tất cả chúng ta mở một form tạo mới user, nhập các tài liệu vào và nhấn nút Gửi. Trên đây tất cả chúng ta gửi đi các yêu cầu đơn lẻ, nếu như muốn cùng một lúc gửi nhiều các yêu cầu lấy tài liệu thì sao? Ví dụ tiếp theo gửi đi hai yêu cầu, một để lấy thông tin tài khoản, một để lấy thông tin đơn hàng.

function getAccountInfomation() { return axios.get(‘/tài khoản/12345’); } function getOrderInfomation() { return axios.get(‘/order/12345’); } axios.all([getAccountInfomation(), getOrderInfomation()]) .then(axios.spread(function (tài khoản, order) { // Cả hai yêu cầu được hoàn thành }));

Các phương thức khác ví như DELETE, PUT, PATCH cũng được tương trợ. Bạn cũng có thể tham khảo thêm trong tài liệu Axios. Tiếp theo, tất cả chúng ta sẽ tìm hiểu phương pháp đưa thêm các thiết lập cấu hình trước lúc gửi đi yêu cầu HTTP (với trình duyệt thường nó ngầm định nên bạn không để ý đến).

axios(url, [config])

Các yêu cầu HTTP có thể gửi đi bằng cú pháp ở trên, có thể truyền vào các cấu hình trong đối tượng người dùng config như sau:

{ // URL đích đến của yêu cầu HTTP url: ‘/user’, // Phương thức gửi yêu cầu có thể là GET, POST, DELETE, PUT… method: ‘get’, // default // URL cơ sở, nếu như khách hàng có nhiều request đến một server sử dụng URL cơ sở để rút gọn thông số url ở trên // URL cơ sở có thể thiết lập toàn cục để dùng lại sau này. baseURL: ‘https://demo.com/api/’, // Thay đổi headers object của request. transformRequest: [function (data, headers) { // Thực hiện thay đổi tại đây return data; }], // Thay đổi headers object của phần response transformResponse: [function (data) { // Thực hiện thay đổi tại đây return data; }], // Thiết lập các giá trị cho headers object. headers: {‘X-Requested-With’: ‘XMLHttpRequest’}, // Thêm thông số vào query string params: { ID: 12345 }, // Cũng là thông số nhưng thêm vào body toàn thân của request data: { firstName: ‘Nguyen’ }, // Thiết lập thời kì chờ cho xử lý yêu cầu, nếu vượt quá sẽ hủy bỏ yêu cầu HTTP timeout: 1000, // Nhận diện yêu cầu là cross-site Access-Control hay là không withCredentials: false, // default // Nhận diện URL có cần xác thực hay là không và gửi đi các thông tin để xác thực. auth: { username: ‘tuandungb’, password: ‘123456’ }, // Nhận diện dạng tài liệu trả về từ server: arraybuffer, blob, document, json, text, stream responseType: ‘json’, // mặc định // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token xsrfCookieName: ‘XSRF-TOKEN’, // default // `xsrfHeaderName` is the name of the http header that carries the xsrf token value xsrfHeaderName: ‘X-XSRF-TOKEN’, // default // Quản lý tiến trình upload onUploadProgress: function (progressEvent) { // Do whatever you want with the native progress sự kiện }, // Quản lý tiến trình tải về onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress sự kiện }, // Kích thước tài liệu tối đa hồi đáp từ sever maxContentLength: 2000, // Kiểm tra trạng thái validateStatus: function (status) { return status >= 200 && status < 300; // default }, // Số lần chuyển hướng được cho phép khi gọi đến URL, nếu thiết lập 0 là không được cho phép maxRedirects: 5, // mặc định // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // Thiết lập proxy proxy: { host: ‘127.0.0.1’, port: 9000, auth: { username: ‘tuandungb’, password: ‘123456’ } }, // Xác định cancel token sử dụng để hủy bỏ yêu cầu cancelToken: new CancelToken(function (cancel) { }) }

1.3.2 Cấu trúc tài liệu hồi đáp

Đối tượng người sử dụng response được trả về từ server có cấu trúc như sau:

{ // Tài liệu cần lấy từ sever data: {}, // Mã trạng thái HTTP của yêu cầu status: 200, // Mô tả trạng thái tương ứng với mã trạng thái ở trên statusText: ‘OK’, // tin tức header của hồi đáp (response) headers: {}, // config được thiết lập trước lúc gửi request config: {}, // là thực thể của ClientRequest nếu sử dụng Node.js và XMLHttpRequest trong trình duyệt request: {} }

Với cấu trúc này, khi một request HTTP được gửi đến server tất cả chúng ta có thể quản lý được những thông tin trả về từ server, hãy xem ví dụ sau:

axios.get(‘http://demo.com/user/12345’) .then(function(response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); });

1.3.3 Hook API

Trong quá trình gửi đi một yêu cầu, ngay trước lúc gửi tất cả chúng ta có thể mong muốn thực hiện một số công việc hoặc ngay trong lúc nhận được response cũng vậy.

Xem Thêm : Tổng Hợp Bộ Đề Ets Là Gì – Tại Sao Lại Phải Học Và Thi Toeic

Ví dụ thực thế, nếu như khách hàng muốn là một thanh trạng thái hiển thị trường trăm công việc đang thực hiện, bạn cần phải biết các thời khắc ngay trong lúc gửi request và ngay trong lúc nhận được response. Có thể sử dụng các thuật ngữ như Hook API hoặc Interceptor cho những gì mô tả ở trên. Với axios bạn tham khảo đoạn mã trong tương lai kết phù hợp với thư viện nprogress:

axios.interceptors.request.use(function (config) { NProgress.start(); return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.use(function (response) { NProgress.done(); return response; }, function (error) { return Promise.reject(error); });

1.3.4 Kiểm soát lỗi khi gửi yêu cầu HTTP với Axios

Kiểm soát lỗi cụ thể là rất cấp thiết, với từng lỗi cụ thể tất cả chúng ta sẽ có được những xử lý riêng biệt tăng cường trải nghiệm người dùng với sự linh hoạt của ứng dụng:

axios.get(‘http://demo.com/user/12345’) .catch(function (error) { if (error.response) { // Lỗi khi server nhận được request và không xử lý được, các lỗi này còn có mã lỗi trong dải 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // Lỗi khi request được tạo ra nhưng server không hồi đáp, khi đó error.request là một thực thể của XMLHttpRequest console.log(error.request); } else { // Lỗi khi thiết lập request console.log(‘Error’, error.message); } console.log(error.config); });

1.3.5 Hủy bỏ một yêu cầu

Hủy bỏ yêu cầu là một chức năng cấp thiết, bạn tưởng tượng người dùng click vào nút kiến nghị và gửi đơn hàng và mỗi đơn hàng xử lý trong 10 giây, tuy nhiên ngay sau thời điểm click người dùng lại muốn hủy bỏ yêu cầu để sửa lại đơn hàng này với số lượng sản phẩm nhiều hơn, như vậy hủy bỏ yêu cầu là rất cấp thiết.

var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.post(‘http://demo.com/order’, { data: { ‘product_id’: 234, ‘quantity’: 3 }, cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log(‘Hủy bỏ yêu cầu’, thrown.message); } else { // Quản lý lỗi ở đây } }); // Người dùng muốn hủy yêu cầu tạo đơn hàng mới source.cancel(‘Hủy yêu cầu tạo đơn hàng mới.’);

2.1 Đặt vấn đề

Trong phần 1 hiểu Axios là gì? và biết phương pháp sử dụng thư viện này, phần tiếp theo tất cả chúng ta sẽ cùng nhau xây dựng một ví dụ cụ thể để sở hữu thể nắm rõ hơn về phương pháp ứng dụng Axios. Ví dụ của tất cả chúng ta là một trang khai thác tin tức từ Vnexpress.net.

Do Vnexpress.net không cung cấp API để khai thác tin nên tất cả chúng ta sẽ sử dụng RSS2JSON để chuyển đổi từ RSS sang thành một API trả về tài liệu Json. Cấu trúc tài liệu trả về có dạng Json như hình ảnh dưới:

Ok, như vậy tất cả chúng ta đã có API cung cấp tài liệu, tiếp theo tất cả chúng ta sẽ sử dụng Vue.js và Axios để khai thác tin tức và trình bày lại trang.

2.2 Xây dựng trang khai thác tin

Diễn giải ứng dụng:

Điểm vào của ứng dụng là sử dụng axios.get để lấy tài liệu từ API do RSS2JSON cung cấp, tài liệu trả về dạng JSON.

Sử dụng v-for của Vue.js để tái diễn qua mảng results và hiển thị từng item (nội dung bài viết) trong mảng này, tất cả chúng ta style bằng bootstrap.

Do thời kì có hạn nên ứng dụng khai thác tin chỉ tạm dừng ở tính năng cơ bản để giúp độc giả nắm rõ hơn về axios, hứa hẹn có thời kì tất cả chúng ta sẽ làm một ứng dụng khai thác tin mạnh mẽ và đầy đủ tính năng hơn.

Ngày nay có rất nhiều các HTTP Client dạng Javascript có thể kể tới ngoài Axios như việc sử dụng jQuery, phương thức fetch() được tương trợ từ ES6, SuperAgent, Qwest… Tuy nhiên Axios có nhiều ưu điểm như sau:

Axios xây dựng dựa trên nền tảng Promise do đó nó thừa hưởng các ưu điểm của Promise. Được cho phép thực hiện các hook (intercept) ngay trong lúc gửi request và nhận response. Được cho phép hủy yêu cầu, đây là một chức năng mà các thư viện khác không có.

Qua nội dung bài viết, tôi tin rằng bạn đã trả lời được thắc mắc Axios là gì?, Vì sao dùng Axios?. Axios là HTTP Client giúp xây dựng các ứng dụng kết nối từ nhiều nguồn tài liệu dễ dàng, nếu có sự liên tưởng các bạn sẽ thấy nó giống với GuzzleHttp trong PHP. Axios là phần phương tiện giúp lấy tài liệu dễ dàng cho những framework như Vue.js, React.js, Angular… xây dựng các ứng dụng font-end linh động và dễ dàng.