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ộ. Hãy cùng tìm hiểu cách sử dụng async await vs fetch nhé.
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.
function getUser(name){
fetch(`https://api.github.com/users/${name}`)
.then(function(response) {
return response.json();
})
.then(function(json) {
console.log(json);
});
};
//get user data
getUser('yourUsernameHere');
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.
async function getUserAsync(name) {
let response = await fetch(`https://api.github.com/users/${name}`);
let data = await response.json()
return data;
}
getUserAsync('yourUsernameHere').then(data => console.log(data));
Xử lý lỗi
async function doSomethingAsync() {
try {
// This async call may fail.
let result = await getUserAsync('yourUsernameHere') ;
} catch (error) {
// If it does we will catch the error here.
}
}
Or
getUserAsync('yourUsernameHere')
.then(data => {
console.log(data)
}).catch(error => {
console.log('request failed', error)
}
);
Xem thêm :
[…] Nguồn Sử dụng JavaScript Fetch API với Async/Await – NTCDE.COM […]