Callback và Promise trong JavaScript dễ hiểu, dễ tiếp cận cho người mới bắt đầu ( important )

Giớ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:

				
					<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> 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

Kết luận : Hy vọng bài viết này giúp bạn hiểu rõ hơn về Callback và Promise trong JavaScript và cách sử dụng chúng để xử lý tác vụ bất đồng bộ. Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, hãy để lại bình luận bên dưới để chúng tôi có thể trao đổi thêm với nhau.
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 )

Leave a Reply

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