Làm ứng dụng frontend không đơn giản như xưa. Các framework giao diện người dùng như React và Vue phụ thuộc rất nhiều vào API. Điều này làm tăng thêm độ phức tạp cho ứng dụng của chúng tôi vì chúng tôi cần quản lý cách chúng tôi gọi các API này. Một giải pháp là chúng ta có thể đơn giản hóa nó bằng cách viết các lệnh gọi API rõ ràng
Nhưng chờ đã, "Các cuộc gọi API sạch" là gì? . Đầu tiên, tôi làm điều này bằng cách sử dụng nguyên tắc trách nhiệm duy nhất. Mỗi chức năng phải có một trách nhiệm duy nhất, để ghi nhớ nguyên tắc này, chúng ta cần tách logic cho từng điểm cuối.
Một điều khác mà tôi cố gắng quản lý là nguyên tắc DRY hoặc “Đừng lặp lại chính mình”. Điều này rất quan trọng, có thể nói là quan trọng hơn trong trường hợp các nhà cung cấp API giao diện người dùng vì nó mang lại cảm giác gọn gàng trong mã, do đó cải thiện khả năng đọc. Đây là lý do tại sao tôi cố gắng sử dụng Axios vì nó cung cấp các tính năng như chặn, mặc định, v.v. Nó làm giảm số lượng mã soạn sẵn mà bạn cần viết cho mỗi điểm cuối API
Ưu và nhược điểm của việc sử dụng Axios
Có nhiều cách để đạt được điều này, bạn có thể sử dụng API tìm nạp của JavaScript hoặc bạn có thể sử dụng thư viện của bên thứ ba có tên là Axios. Qua tiêu đề của bài viết này, bạn có thể đoán rằng tôi thích Axios hơn. Tại sao lại là Axios?
ưu
1. Sự đơn giản
Điều tôi thích nhất ở Axios là nó rất đơn giản để sử dụng. API lập trình rất dễ sử dụng nên tôi đã quá quen với nó. Chà, đây có thể là một sở thích quá cá nhân nhưng bạn có thể tự mình thử. Tôi đã sử dụng API tìm nạp AJAX và ES6 của jQuery và tôi sẽ xếp hạng Axios trên tất cả chúng. Mặc dù không quá chênh lệch vì cả ba người họ đều rất tuyệt khi làm việc cùng
2. Tương thích ngược
Thành thật mà nói, bạn sẽ không nghĩ về tính năng này cho đến khi bạn cần nó. Ý tôi là, hầu hết mọi người đều có trình duyệt hiện đại, nhưng nếu một số khách hàng của bạn không phải là hầu hết mọi người thì họ có thể không sử dụng được ứng dụng của bạn nếu ứng dụng không tương thích ngược. ES6 Fetch API tương đối mới và các trình duyệt cũ không có khả năng sử dụng nó. Mặt khác, các thư viện như Axios và AJAX của jQuery được xây dựng dựa trên XMLHttpRequest của Javascript. Đối với những bạn đang thắc mắc, XMLHttpRequest là phiên bản cũ của cơ chế gọi HTTP tích hợp Javascripts
3. Thư viện trưởng thành với nhiều tính năng
Bạn có thể làm rất nhiều với Axios, rất nhiều. Ví dụ: khi viết bài này, API tìm nạp của JavaScript không tích hợp sẵn trình chặn yêu cầu/phản hồi. Bạn phải sử dụng các bên thứ ba khác để làm như vậy. So với tìm nạp, viết sạch API bằng Axios rất đơn giản. Axios đã có rất nhiều tiện ích tích hợp sẵn. Để đặt tên cho một số, bạn có thể đặt tiêu đề mặc định và đặt URL cơ sở mặc định bằng Axios
Nhược điểm
1. Quá phức tạp cho các ứng dụng nhỏ
Tôi đã sử dụng Axios trong một thời gian dài nên hiểu rằng thư viện này có thể quá mức cần thiết đối với các ứng dụng nhỏ. Ý tôi là nếu bạn chỉ cần sử dụng các API GET và POST của nó thì có lẽ bạn vẫn nên sử dụng ES6 Fetch API. Tìm nạp có nguồn gốc từ Javascript, Axios thì không. Điều này đưa chúng ta đến điểm tiếp theo
2. Axios tăng kích thước gói của bạn
Điểm thứ hai này tương ứng với điểm đầu tiên một cách hoàn hảo. Một trong những lý do chính khiến tôi tránh sử dụng Axios cho các ứng dụng nhỏ là vì nó làm tăng kích thước bản dựng sản xuất của bạn. Chắc chắn, bạn có thể không nhận thấy kích thước tăng đột biến đối với các ứng dụng lớn như thương mại điện tử, v.v. Nhưng bạn sẽ nhận thấy sự gia tăng lớn nếu bạn đang tạo một trang danh mục đầu tư đơn giản. Bài học rút ra?
3. Đó là bên thứ ba
Hãy nhìn xem, hãy để tôi bắt đầu bằng cách nói, điểm thứ ba này thực sự chủ quan và một số người có thể có quan điểm ngược lại. Axios là bên thứ ba. đúng, bạn nghe đúng đấy. Nó không có nguồn gốc từ Javascript, không giống như Fetch. Bạn phụ thuộc vào cộng đồng để duy trì ứng dụng quý giá của mình. Nhưng một lần nữa, hầu hết các ứng dụng ngày nay đều sử dụng các sản phẩm nguồn mở, vậy nó có phải là vấn đề không? . Một lần nữa đây là một sở thích. Tôi không khuyên bạn phát minh lại bánh xe. Chỉ cần hiểu rằng bạn không sở hữu bánh xe
Cài đặt Axios
Axios có sẵn trong nhiều kho JavaScript, bạn có thể truy cập nó bằng sợi và NPM. Nếu bạn đang sử dụng HTML thông thường, bạn có thể nhập nó từ CDN như jsDelivr, Unpkg hoặc Cloudflare.
Giả sử bạn đang sử dụng NPM, chúng ta cần cài đặt Axios bằng lệnh này
npm install -S axios
Nếu không có lỗi trong quá trình cài đặt thì bạn có thể tiếp tục bước tiếp theo. Anh có thể kiểm tra
Tạo ứng dụng khách Axios riêng biệt
Máy khách Axios là gì? . Chúng tôi đặt các giá trị mặc định của mình trong ứng dụng khách Axios, sau đó chúng tôi xuất ứng dụng khách bằng cách sử dụng mặc định xuất của JavaScript. Sau đó, chúng tôi chỉ có thể tham khảo ứng dụng khách từ phần còn lại của ứng dụng
Đầu tiên, tạo một tệp mới có tên là apiClient. js và nhập Axios
import axios from 'axios';
Sau đó, chúng tôi tạo một ứng dụng khách bằng cách sử dụng axios. tạo nên
const axiosClient = axios.create[{
baseURL: `//api.example.com`,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}];
Như bạn có thể thấy, chúng tôi đã khởi tạo các URL cơ sở và tiêu đề mặc định cho tất cả lệnh gọi HTTP của mình
Sử dụng thiết bị chặn để chuyển hướng sạch
Khi gọi các API tương tác, đặc biệt khi có liên quan đến xác thực. Bạn sẽ cần xác định các điều kiện khi cuộc gọi của bạn không được phép và làm cho ứng dụng của bạn phản ứng một cách thích hợp. Thiết bị chặn là hoàn hảo cho trường hợp sử dụng này
Giả sử rằng chúng tôi sẽ cần ứng dụng của mình chuyển hướng chúng tôi đến trang chủ của chúng tôi khi cookie của chúng tôi hết hạn và khi cookie của chúng tôi hết hạn, API sẽ trả về mã trạng thái 401. Đây là cách bạn sẽ đi về nó
axiosClient.interceptors.response.use[
function [response] {
return response;
},
function [error] {
let res = error.response;
if [res.status == 401] {
window.location.href = “//example.com/login”;
}
console.error[“Looks like there was a problem. Status Code: “ + res.status];
return Promise.reject[error];
}
];
Đơn giản phải không?
Xuất ứng dụng khách Axios
Sau khi định cấu hình ứng dụng khách Axios của bạn, bạn sẽ cần xuất ứng dụng đó để cung cấp cho toàn bộ dự án. Bạn có thể làm điều này bằng cách sử dụng tính năng xuất mặc định
export default {
axiosClient
];
Bây giờ chúng tôi đã cung cấp ứng dụng khách Axios cho toàn bộ dự án. Tiếp theo, chúng tôi sẽ tạo trình xử lý API cho từng điểm cuối
cấu trúc thư mục
Trước khi chúng ta tiếp tục, tôi nghĩ sẽ hữu ích nếu chỉ cho bạn cách sắp xếp các thư mục con của bạn. Thay vì viết một lời giải thích dài dòng, tôi nghĩ sẽ tốt hơn nếu tôi cung cấp cho bạn một hình ảnh về những gì tôi đang nói
Giả sử chúng ta sẽ có điểm cuối quản trị viên, người dùng và sản phẩm. Chúng tôi sẽ trang chủ apiClient. js bên trong thư mục gốc của thư mục mạng. Mặc dù, liên quan đến việc đặt tên thư mục hoặc thậm chí cấu trúc là sở thích cá nhân của tôi
Các điểm cuối sẽ được đặt bên trong một thư mục lib và được phân tách bằng các mối quan tâm trong mỗi tệp. Ví dụ: với mục đích xác thực, điểm cuối của người dùng sẽ được đặt bên trong tệp người dùng. Các điểm cuối liên quan đến sản phẩm sẽ được đặt bên trong tệp sản phẩm
Viết Trình xử lý API
Bây giờ chúng ta sẽ viết trình xử lý API. Mỗi điểm cuối sẽ có chức năng không đồng bộ với các tham số tùy chỉnh. Tất cả các điểm cuối sẽ sử dụng ứng dụng khách mà chúng tôi đã xác định trước đó. Để làm một ví dụ đơn giản, tôi sẽ viết hai trình xử lý API để lấy sản phẩm mới và thêm sản phẩm mới
import { axiosClient } from "../apiClient";
export function getProduct[]{
return axiosClient.get['/product'];
}
export function addProduct[data]{
return axiosClient.post['/product', JSON.stringify[data]];
}
Điều này tổng hợp khá nhiều về cách tôi dự định viết một trình xử lý API và như bạn có thể thấy mỗi lệnh gọi API đều rõ ràng và tất cả đều áp dụng nguyên tắc trách nhiệm duy nhất. Bây giờ bạn có thể tham khảo các trình xử lý này trên trang chính của mình
Sử dụng trình xử lý trong ứng dụng web của bạn
Giả sử rằng bạn đang sử dụng một dự án NPM cho tất cả những điều này, bạn có thể dễ dàng tham chiếu các trình xử lý API JavaScript của mình bằng phương thức nhập. Trong trường hợp này, tôi sẽ sử dụng điểm cuối getProduct
import { getProduct } from "../network/lib/product";
getProduct[]
.then[function[response]{
// Process response and
// Do something with the UI;
}];
Vậy là bạn đã có nó, một trình xử lý API đơn giản và sạch sẽ. Bạn đã làm cho ứng dụng của mình dễ đọc hơn và dễ bảo trì hơn
Từ cuối cùng
Có một ứng dụng hoạt động thật tuyệt, bạn có tất cả các chức năng phù hợp và bạn gần như đã hoàn thành. Tuy nhiên, mọi người có xu hướng quên rằng họ cần duy trì ứng dụng đó. Vì vậy, sớm hay muộn bạn sẽ phải đọc lại đoạn mã đó. Và chẳng phải sẽ tốt hơn nếu tất cả đều dễ đọc và dễ hiểu hơn sao? . Tôi nghĩ tất cả chúng ta đều muốn điều đó, và thậm chí tôi có thể nói rằng chúng ta sẽ rất tự hào nếu có thể đọc được mã mà chúng ta đã viết cách đây 1 năm