Sử dụng JavaScript Fetch API với Async/Await

Nếu bạn đã sử dụng JavaScript được một thời gian, có lẽ bạn đã sử dụng Fetch API ES6. Nó thực sự thú vị , đặc biệt là vì nó liên quan đến các phương thức JavaScript không đồng bộ.

Một chút về Fetch

Sử dụng fetch() có thể được coi là sử dụng API cấp thấp hơn để thực hiện các nhu cầu của bạn để trả về phản hồi từ URI, nói cách khác là không dùng framework hoặc thư viện.

fetch đã được giới thiệu để các nhà phát triển có thể dễ dàng thực hiện các yêu cầu tới các điểm cuối của URI hoặc phần còn lại cho các ứng dụng.

Trước đó, tiêu chuẩn là sử dụng các yêu cầu ajax chúng ta thường dùng XMLHttpRequest, ex: var xhr = new XMLHttpRequest; . Nó không tệ và vẫn tồn tại rất nhiều code kế thừa ngoài kia, vì vậy bạn cũng nên hiểu về cách thức hoạt động của nó và nguồn gốc của XMLHttpRequests, vì đây là tiêu chuẩn trước khi REST xuất hiện.

Promise Code

Đoạn mã dưới đây không tệ, và nó hoạt động chính xác, tuy nhiên, có một vài điều về nó làm cho nó rối rắm ở đây. Lưu ý .then() function, nó hỗ trợ callback function để giải quyết, xử lý kết quả cho fetch() function.

Nó trông khá là dễ đọc đối với đoạn code ngắn. Tuy nhiên, có sự xâu chuỗi của .then() và điều này có thể dẫn đến cái thường được gọi là callback hell, hoặc nhiều callback lồng nhau. Điều đó làm giảm khả năng đọc hiểu code và có thể dễ dàng ảnh hưởng đến hiệu suất hoặc xuất hiện một vài con bugs.

Sử dụng Async/Await với Fetch API

Sử dụng Async/Await không được hỗ trợ đầy đủ trên tất cả các trình duyệt. Vì vậy, bạn nên biết điều này, và kiểm tra nhu cầu của bạn khi phát triển.

Bạn có thể kiểm tra trình duyệt hỗ trợ Async/Await tại đây, và trình duyệt hỗ trợ fetch function tại đây. Hãy nhớ rằng để gọi một hàm bằng từ khóa await, nó phải nằm trong hàm async như trong ví dụ dưới đây.

Xử lý lỗi

Xem thêm :

Thêm meta tags cho website Nuxt JS Tạo Blog đơn giản với Nuxt JS và WordPress API Cài đặt Git trên Ubuntu 18.04 Hướng dẫn cài đặt Node.js trên VPS Ubuntu 18.04 Styling Placeholder Text của thẻ input với CSS Cài đặt và Active WebStorm 2019 với License key 50+ thuộc tính thú vị trong CSS Cài đặt WordPress với Caddy web server trên Ubuntu 18.04 Cách cài đặt và cấu hình Caddy web server trên VPS Ubuntu 18.04 Xử lý danh sách với Map, Filter & Reduce trong Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.