Hướng dẫn axios nodejs - axios nodejs
Tổng quanAxios là một HTTP client được viết dựa trên Promises được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.js. Show
Việc tạo ra một HTTP request dùng để fetch hay lưu dữ liệu là một trong những nhiệm vụ thường thấy mà một ứng dụng Javascript phía client cần phải làm khi muốn giao tiếp với phía server. Các thư viện bên thứ 3, đặc biệt là jQuery từ xưa đến nay vẫn là một trong những cách phổ biến để giúp cho các browser API tương tác tốt hơn, rõ ràng mạch lạc hơn và xóa đi những điểm khác biệt giữa các browser với nhau. Khi ngày càng có nhiều developer thích dùng các native DOM API được nâng cấp và cải thiện hơn jQuery, hay các thư viện lập trình front-end UI như React và Vue.js thì việc sử dụng cả một thư viện jQuery chỉ với một giá trị sử dụng đó là tính năng của hàm Hãy cùng xem cách để bắt đầu sử dụng Axios trong code của bạn, và xem một vài tính năng đã góp phần làm cho nó thêm phổ biến đối với các lập trình viên Javascript.Axios trong code của bạn, và xem một vài tính năng đã góp phần làm cho nó thêm phổ biến đối với các lập trình viên Javascript. Axios Vs FetchCó lẽ bạn cũng đã để ý rằng, các browser hiện đại bây giờ thường đi kèm và xây dựng sẵn các tính năng Fetch API mới hơn, vậy tạo sao ta lại không dùng nó luôn cho xong? Rất nhiều những sự khác biệt giữa Axios và Fetch khiến rất nhiều người vẫn lựa chọn Axios thay vì Fetch.Axios và Fetch khiến rất nhiều người vẫn lựa chọn Axios thay vì Fetch. Một trong những đặc điểm lớn ta có thể thấy đó là cách mà 2 thư viện xử lý với các HTTP error code. Khi sử dụng Fetch, nếu khi server trả về các mã lỗi 4xx hay 5xx, thì hàm 0 của bạn sẽ không được gọi đến và người lập trình viên sẽ có nhiệm vụ phải tự kiểm tra trạng thái của mã trả về để xác định xem liệu request đó có thành công hay không. Trong khi đó, Axios sẽ reject tất cả các promise của request nếu một trong các mã lỗi trên được trả về.Axios sẽ reject tất cả các promise của request nếu một trong các mã lỗi trên được trả về.Một điểm khác biệt nho nhỏ khác, điều mà không ít các lập trình viên mới trong việc xây dựng API gặp phải đó là việc Fetch không tự động gủi trả cookies về cho server khi tạo một request. Ta sẽ cần phải truyền một cách trực tiếp các option để cho cookies có thể được include. Còn với Axios thì bạn không hề phải lo về vấn đề này.Fetch không tự động gủi trả cookies về cho server khi tạo một request. Ta sẽ cần phải truyền một cách trực tiếp các option để cho cookies có thể được include. Còn với Axios thì bạn không hề phải lo về vấn đề này. Sự khác biệt có thể được coi là vô cùng đáng chú ý đối với rất nhiều lập trình viên đó là khả năng cập nhật tiến độ của những lần uploads/downloads. Vì Axios được xây dựng dựa trên các XHR API cũ hơn, bạn có thể khai báo các hàm callback cho 1 và 2 để hiện thị phần trăm thành công tại giao diện cho app của bạn. Và cho đến hiện tại thì 3 vẫn chưa hỗ trợ gì cho việc này.Axios được xây dựng dựa trên các XHR API cũ hơn, bạn có thể khai báo các hàm callback cho 1 và 2 để hiện thị phần trăm thành công tại giao diện cho app của bạn. Và cho đến hiện tại thì 3 vẫn chưa hỗ trợ gì cho việc này.Cuối cùng, Axios có thể được xử dụng ở cả browser và Node.js và chính điều này đã tạo cơ hội cho việc chia sẻ code Javascript giữa các trình duyệt và phần back-end hay việc thực hiện render cho ứng dụng front-end của bạn ở phía server.Axios có thể được xử dụng ở cả browser và Node.js và chính điều này đã tạo cơ hội cho việc chia sẻ code Javascript giữa các trình duyệt và phần back-end hay việc thực hiện render cho ứng dụng front-end của bạn ở phía server. Cài đặtCó thể bạn đã biết, một trong các cách thường thấy để cài đặt Axios đó là thông qua trình quản lý các npm package.Axios đó là thông qua trình quản lý các npm package.
và sau đó include nó vào trong code của bạn ở những nơi bạn cần:
Hoặc nếu bạn không sử dụng một loại module bundler nào (ví dụ: webpack), thì bạn vẫn luôn có thể kéo thư viện này từ một CDN như theo cách truyền thống:
Hỗ trợ trình duyệtAxios có thể hoạt động trong tất các trình duyệt web hiện đại, và Internet Explorer phiên bản 8+ có thể hoạt động trong tất các trình duyệt web hiện đại, và Internet Explorer phiên bản 8+ Tạo một request với AxiosGiống như với hàm
Ở đây chúng ta cung cấp cho Axios biết rằng phương thức HTTP nào mà chúng ta muốn dùng (Ví dụ: GET/POST/DELETE...) và URL nào được sử dụng để gửi request lên.Axios biết rằng phương thức HTTP nào mà chúng ta muốn dùng (Ví dụ: GET/POST/DELETE...) và URL nào được sử dụng để gửi request lên. Đồng thời chúng ta cũng cung cấp một số dữ liệu để có thể gửi kèm với request dưới dạng các object Javascript đơn giản gồm các cặp key/value. Mặc định, Axios sẽ serialize các object này thành JSON và gắn chúng ở phần body của request.Axios sẽ serialize các object này thành JSON và gắn chúng ở phần body của request. Các option cho RequestCó rất nhiều các option thêm mà bạn có thể truyền vào khi tạo một request, nhưng dưới đây là những option phổ biến nhất:
Các hàm tiện lợiGiống như jQuery, Axios cũng có những hàm ngắn để thực hiện các kiểu request khác nhau.jQuery, Axios cũng có những hàm ngắn để thực hiện các kiểu request khác nhau. Các hàm 7, 8, 9 và 0 đều nhận vào 2 tham số là URL và một object option dùng để config request. Các hàm 1, 2 và 3 nhận một object dữ liệu vào thành tham số thứ 2 của chúng và object option dùng để config là tham số thứ 3.
Nhận về một responseMột khi bạn đã tạo ra một request, Axios trả về một promises mà sẽ resolve ngay cả khi kết quả trả về là một object response hay một object error.Axios trả về một promises mà sẽ resolve ngay cả khi kết quả trả về là một object response hay một object error.
Response ObjectKhi một request được thực hiện thành công, thì hàm 4 của bạn sẽ nhận được một response object với các thuộc tính như sau:
Error ObjectNếu có bất kỳ vấn đề gì xảy ra với request, promise sẽ bị reject với một error object chứa những thuộc tính sau đây.
Error ObjectNếu có bất kỳ vấn đề gì xảy ra với request, promise sẽ bị reject với một error object chứa những thuộc tính sau đây.
7 và 8. Cả 2 thuộc tính đều là các mảng, giúp bạn có thể tạo một luồng các function mà dữ liệu có thể đi qua. 3: response object được trả về.
Transforms và Interceptors Transforms Axios cho phép bạn cung cấp các function để biến đổi dữ liệu đến và đi, dưới dạng 2 config option mà bạn có thể set khi thực hiện một request: axios.get('/products/5'); 7 và axios.get('/products/5'); 8. Cả 2 thuộc tính đều là các mảng, giúp bạn có thể tạo một luồng các function mà dữ liệu có thể đi qua.Bất kỳ function nào được truyền vào 7 đều được ứng dụng vào cho các request PUT, POST và PATCH. Chúng nhận vào dữ liệu cần request và object header dưới dạng tham số và phải trả về một object đã được chỉnh sửa thay đổi.Axios cũng cho phép bạn thêm các function gọi là interceptors. Giống transform, những function này có thể được đính vào để gọi đến khi một request được tạo ra, hay một response được trả về.
Các function cũng có thể được thêm vào 8 tương tự như vậy, nhưng chỉ được gọi khi có response data từ server, và trước khi response được truyền qua bất cứ hàm 4 nào.Vậy ta có thể sử dụng transform vào mục đích gì? Một trường hợp sử dụng đó là khi API mong chờ dữ liệu trả về dưới format cụ thể khác như XML hay kể cả CSV. Bạn có thể set up một vài hàm transform để convert dữ liệu gửi đi và trả về. Mặc định, hàm 7 và 8 biến đổi dữ liệu thành JSON.InterceptorsTrong khi transform cho phép bạn điều chỉnh dữ liệu gửi đi và trả về, Axios cũng cho phép bạn thêm các function gọi là interceptors. Giống transform, những function này có thể được đính vào để gọi đến khi một request được tạo ra, hay một response được trả về.Axios được hưởng lợi rất nhiều từ một hệ sinh thái các thư viện bên thứ 3 thừa hưởng từ tính năng của Axios.
Là một thư viện phổ biến, Axios được hưởng lợi rất nhiều từ một hệ sinh thái các thư viện bên thứ 3 thừa hưởng từ tính năng của Axios.axios-mock-adaptor: cho phép bạn dẽ dàng mock request để thực hiện việc kiểm tra code. axios-cache-plugin: một wrapper được dùng để lựa chọn lưu Cache các GET request.
|