Nội dung bài viết
ToggleGiới thiệu
Trong lập trình JavaScript, xử lý các tác vụ bất đồng bộ là một vấn đề quan trọng. Để giải quyết vấn đề này, JavaScript cung cấp cho chúng ta hai cách tiếp cận khác nhau: Callback và Promise. Trong bài viết này, chúng ta sẽ tìm hiểu về hai khái niệm này và tìm hiểu cách sử dụng chúng để xử lý tác vụ bất đồng bộ một cách dễ dàng.
Callback trong JavaScript
Với Callback là một hàm được truyền vào một hàm khác như một tham số. Hàm được truyền vào được gọi lại (callback) bởi hàm gọi nó. Điều này cho phép chúng ta viết mã xử lý bất đồng bộ trong JavaScript một cách dễ dàng hơn.
Ví dụ dưới đây mô tả cách sử dụng Callback để xử lý tác vụ bất đồng bộ trong JavaScript:
function fetchData(callback) {
// Giả định rằng chúng ta đang lấy dữ liệu từ máy chủ
// Việc này mất một thời gian và là một tác vụ bất đồng bộ
setTimeout(function() {
const data = { name: 'John', age: 30 };
callback(data);
}, 2000);
}
function displayData(data) {
console.log(`Name: ${data.name}, Age: ${data.age}`);
}
fetchData(displayData);
Trong ví dụ trên, chúng ta tạo ra một hàm fetchData
để lấy dữ liệu từ máy chủ. Hàm này chấp nhận một callback như là tham số và sau đó sử dụng setTimeout
để giả định rằng việc lấy dữ liệu mất một thời gian và là một tác vụ bất đồng bộ. Sau khi dữ liệu được lấy, callback được gọi để xử lý dữ liệu đó.
Ở đây, chúng ta tạo một hàm displayData
để hiển thị dữ liệu. Hàm này được truyền vào fetchData
như là một callback và được gọi khi dữ liệu được lấy về. Kết quả sẽ được hiển thị trong console sau 2 giây.
Promise trong JavaScript
Và Promise là một đối tượng trong JavaScript được sử dụng để đại diện cho một giá trị chưa được tính toán hoặc chưa được xử lý. Promise cung cấp cho chúng ta một cách để xử lý tác vụ bất đồng bộ trong JavaScript một cách dễ dàng hơn.
để xử lý tác vụ bất đồng bộ trong JavaScript:
function fetchData() {
// Giả định rằng chúng ta đang lấy dữ liệu từ máy chủ
// Việc này mất một thời gian và là một tác vụ bất đồng bộ
return new Promise(function(resolve, reject) {
setTimeout(function() {
const data = { name: 'John', age: 30 };
if (data) {
resolve(data);
} else {
reject('Failed to fetch data');
}
}, 2000);
});
}
fetchData()
.then(function(data) {
console.log(`Name: ${data.name}, Age: ${data.age}`);
})
.catch(function(error) {
console.log(error);
});
Trong ví dụ trên, chúng ta tạo ra một hàm fetchData
để lấy dữ liệu từ máy chủ. Hàm này trả về một Promise và sử dụng setTimeout
để giả định rằng việc lấy dữ liệu mất một thời gian và là một tác vụ bất đồng bộ. Khi dữ liệu được lấy về, Promise được giải quyết (resolve) với dữ liệu đó. Nếu xảy ra lỗi, Promise sẽ bị từ chối (reject).
Ở đây, chúng ta sử dụng .then
để xử lý kết quả thành công của Promise và .catch
để xử lý lỗi của Promise. Trong phần xử lý thành công, chúng ta hiển thị dữ liệu. Trong phần xử lý lỗi, chúng ta hiển thị thông báo lỗi.
Kết luận và bài viết có liên quan
Bài viết có liên quan: Tận dụng Ajax và sử dụng jQuery trong JavaScript: Hướng dẫn cho người mới bắt đầu dễ hiểu cho người mới bắt đầu ( important ) Các biến toàn cục và biến cục bộ trong JavaScript dễ hiểu cho người mới bắt đầu ( important ) Khám phá các toán tử trong JavaScript: Từ cơ bản đến nâng cao đơn giản dành cho người mới ( important )