Rate this post

Promise là một đối tượng trong JavaScript mà được sử dụng để xử lý các tác vụ bất đồng bộ. Nó cung cấp một cách để giải quyết vấn đề liên quan đến việc chờ cho một tác vụ bất đồng bộ hoàn thành và làm cho mã bất đồng bộ trở nên dễ đọc và dễ hiểu hơn.

Các bài viết liên quan:

Promise được tạo ra với một trạng thái ban đầu là “pending” và sau đó chuyển sang “fulfilled” hoặc “rejected” sau khi tác vụ bất đồng bộ hoàn thành hoặc có lỗi. Nó cung cấp hai hàm xử lý sự kiện là .then() và .catch() cho phép ta xử lý kết quả sau khi tác vụ hoàn thành hoặc có lỗi xảy ra

Ví dụ:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = getDataFromServer();
    if (data) {
      resolve(data);
    } else {
      reject(new Error('Error fetching data'));
    }
  }, 2000);
});

promise
  .then(data => console.log(data))
  .catch(error => console.error(error));

Trong ví dụ trên, chúng ta sử dụng hàm setTimeout để chờ cho dữ liệu từ một server về, khi dữ liệu được trả về chúng ta sử dụng resolve(data) để gửi kết quả về cho hàm then và nếu có lỗi chúng ta sử dụng reject(new Error(‘Error fetching data’))

Tại sao phải sử dụng promise trong javascript ? 

Promise được sử dụng trong JavaScript vì nó cung cấp một cách dễ dàng và rõ ràng hơn để xử lý các tác vụ bất đồng bộ.

Trước khi sử dụng Promise, chúng ta thường sử dụng callback function để xử lý tác vụ bất đồng bộ. Tuy nhiên, sử dụng callback function có thể gây làm cho mã trở nên khó đọc và khó hiểu khi chúng ta cần chờ cho nhiều hàm khác nhau hoàn thành. Điều này được gọi là “Callback Hell”

Promise giải quyết vấn đề này bằng cách cho phép chúng ta chờ cho một tác vụ bất đồng bộ hoàn thành và xử lý kết quả trả về bằng cách sử dụng .then() và .catch(). Nó còn cung cấp một cách để chạy nhiều tác vụ bất đồng bộ song song và chờ cho chúng hoàn thành trước khi tiếp tục thực thi mã tiếp theo.

Promise được khởi tạo với một hàm xử lý, trong đó chúng ta có thể chỉ định hành động cần thực hiện khi promise được resolve hoặc reject. Khi promise được resolve, chúng ta có thể sử dụng .then() để xử lý kết quả. Khi promise bị reject, chúng ta có thể sử dụng .catch() để xử lý lỗi. Nó cho phép chúng ta chờ đồng bộ hoàn thành các tác vụ bất đồng bộ và xử lý kết quả trả về.

Ví dụ :

//Khởi tạo một promise
const myPromise = new Promise((resolve, reject) => {
  // thực hiện một tác vụ bất đồng bộ
  setTimeout(() => {
    resolve('Success');
  }, 1000);
});

//Sử dụng .then() và .catch() để xử lý kết quả
myPromise
  .then((data) => {
    console.log(data); // Success
  })
  .catch((error) => {
    console.log(error);
  });

Promise còn cung cấp một cách để giải quyết vấn đề liên quan đến việc chờ cho một tác vụ bất đồng bộ hoàn thành và làm cho mã bất đồng bộ trở nên dễ đọc và dễ hiểu hơn, giúp các nhà phát triển giảm thiểu tình trạng “Callback Hell”.

Sử dụng promise trong javascript như thế nào ? 

Để sử dụng Promise trong JavaScript, bạn cần tạo ra một đối tượng Promise với một hàm xử lý tác vụ bất đồng bộ. Hàm này có hai tham số: resolve và reject.

resolve được gọi khi tác vụ bất đồng bộ hoàn thành và trả về kết quả. reject được gọi khi có lỗi xảy ra trong quá trình thực hiện tác vụ.

Ví dụ:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = getDataFromServer();
    if (data) {
      resolve(data);
    } else {
      reject(new Error('Error fetching data'));
    }
  }, 2000);
});

Sau khi tạo ra đối tượng Promise, bạn có thể sử dụng phương thức .then() để xử lý kết quả trả về từ hàm resolve và .catch() để xử lý lỗi từ hàm reject.

promise
  .then(data => console.log(data))
  .catch(error => console.error(error));

Promise còn có một số phương thức khác như .finally() dùng để xử lý sự kiện khi tác vụ hoàn thành hoặc có lỗi.

Còn Promise.all() dùng để chạy nhiều promise song song và chờ cho tất cả hoàn thành trước khi tiếp tục thực thi mã tiếp theo.

Khi nào nên sử dụng promise trong javascript ?

Bạn nên sử dụng Promise trong JavaScript khi cần xử lý các tác vụ bất đồng bộ.

Ví dụ như khi bạn cần gửi một yêu cầu tới một server để lấy dữ liệu, hoặc khi bạn cần thực hiện một tác vụ trên máy tính như đọc hoặc ghi tệp, hoặc các tác vụ tương tự khác.

Promise cung cấp một cách để chờ cho các tác vụ bất đồng bộ hoàn thành và xử lý kết quả trả về hoặc các lỗi của chúng, giúp cho mã của bạn trở nên dễ đọc và dễ hiểu hơn, và giảm thiểu tình trạng “Callback Hell”.

Không nên sử dụng promise trong các trường hợp sau:

  1. Trong trường hợp tác vụ bất đồng bộ không cần thiết: Nếu tác vụ của bạn là đồng bộ và không cần chờ cho bất kỳ tác vụ bất đồng bộ nào hoàn thành, thì sử dụng Promise không cần thiết và có thể gây ra tốn tài nguyên.
  2. Trong trường hợp sử dụng async/await: Nếu bạn đang sử dụng JavaScript trong môi trường hỗ trợ async/await (ES2017+), thì có thể sử dụng cấu trúc async/await thay vì sử dụng Promise để xử lý tác vụ bất đồng bộ.
  3. Trong trường hợp có thể sử dụng Observer pattern: Nếu bạn cần xử lý một số sự kiện hoặc dữ liệu theo thời gian thực, chẳng hạn như một số dữ liệu từ một WebSocket hoặc một số sự kiện từ một thiết bị ngoài, bạn có thể sử dụng mô hình “Observer” để giải quyết vấn đề này mà không cần sử dụng Promise.

Một số ví dụ cụ thể về promise trong javascript 

  1. Lấy dữ liệu từ một API:
const getData = url => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
};

getData('https://some-api.com/data')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

  1. Tải một ảnh từ internet
const downloadImage = url => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = url;
    image.onload = () => resolve(image);
    image.onerror = error => reject(error);
  });
};

downloadImage('https://some-website.com/images/logo.png')
  .then(image =>{
  ///
})

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now