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ộ. 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 :

Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Làm quen với các components thường dùng khi tạo Gutenberg Block Gutenberg Block Attributes Cách tạo Gutenberg Block trong WordPress Tổng quan về Gutenberg trong WordPress Hơn 100 hình ảnh minh họa chất lượng cao, hoàn toàn miễn phí cho products của bạn 9 ứng dụng hữu ích cho Developers

1 thought on “Sử dụng JavaScript Fetch API với Async/Await

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.