Javascript Promise và Promise Chaining

Trong hướng dẫn này, bạn sẽ tìm hiểu về các hứa hẹn trong JavaScript và chuỗi hứa hẹn với sự trợ giúp của các ví dụ.

Trong JavaScript, một lời hứa là một cách tốt để xử lý các hoạt động không đồng bộ . Nó được sử dụng để tìm hiểu xem hoạt động không đồng bộ có được hoàn thành thành công hay không.

Một lời hứa có thể có một trong ba trạng thái.

• Pending
• Fulfilled
• Rejected

Một lời hứa bắt đầu ở trạng thái đang chờ xử lý. Điều đó có nghĩa là quá trình này không hoàn tất. Nếu hoạt động thành công, quá trình kết thúc ở trạng thái hoàn thành. Và, nếu xảy ra lỗi, quá trình sẽ kết thúc ở trạng thái bị từ chối.

Ví dụ: khi bạn yêu cầu dữ liệu từ máy chủ bằng cách sử dụng một lời hứa, nó sẽ ở trạng thái chờ xử lý. Khi dữ liệu đến thành công, nó sẽ ở trạng thái hoàn thành. Nếu lỗi xảy ra, thì nó sẽ ở trạng thái bị từ chối.

Tạo một lời hứa

Để tạo một đối tượng hứa, chúng ta sử dụng hàm Promise()tạo.

let promise = new Promise(function(resolve, reject){
     //do something
});

Hàm Promise()tạo nhận một hàm làm đối số. Hàm cũng chấp nhận hai hàm resolve()và reject().

Nếu lời hứa trả về thành công, resolve()hàm được gọi. Và, nếu có lỗi xảy ra, reject()hàm sẽ được gọi.

Giả sử rằng chương trình dưới đây là một chương trình không đồng bộ. Sau đó, chương trình có thể được xử lý bằng cách sử dụng một lời hứa.

Ví dụ 1: Chương trình có lời hứa

const count = true;

let countValue = new Promise(function (resolve, reject) {
    if (count) {
        resolve("There is a count value.");
    } else {
        reject("There is no count value");
    }
});

console.log(countValue);

Đầu ra

Promise {<resolved>: "There is a count value."}

Trong chương trình trên, một Promiseđối tượng được tạo có hai chức năng:  resolve()và reject(). resolve()được sử dụng nếu quá trình thành công và  reject()được sử dụng khi lỗi xảy ra trong lời hứa.

Lời hứa sẽ được giải quyết nếu giá trị của số đếm là đúng.Hoạt động của lời hứa JavaScript

Chuỗi hứa hẹn JavaScript

Lời hứa rất hữu ích khi bạn phải xử lý nhiều hơn một tác vụ không đồng bộ, lần lượt. Đối với điều đó, chúng tôi sử dụng chuỗi lời hứa.

Bạn có thể thực hiện một hoạt động sau một lời hứa đã được giải quyết bằng các phương pháp then(), catch()và finally().

Phương thức JavaScript then ()

Các then()phương pháp được sử dụng với các callback khi lời hứa được thực hiện thành công hoặc giải quyết.

Cú pháp của then()phương thức là:

promiseObject.then(onFulfilled, onRejected);

Ví dụ 2: Chuỗi Lời hứa với then ()

// returns a promise

let countValue = new Promise(function (resolve, reject) {
  resolve("Promise resolved");
});

// executes when promise is resolved successfully

countValue
  .then(function successValue(result) {
    console.log(result);
  })

  .then(function successValue1() {
    console.log("You can call multiple functions this way.");
  });

Đầu ra

Promise resolved
You can call multiple functions this way.

Trong chương trình trên, then()phương thức này được sử dụng để xâu chuỗi các chức năng vào một lời hứa. Các then()phương pháp được gọi khi sự hứa hẹn được giải quyết thành công.

Bạn có thể xâu chuỗi nhiều then()phương pháp với lời hứa.

Phương thức catch () trong JavaScript

Các catch()phương pháp được sử dụng với các callback khi lời hứa bị từ chối hoặc nếu một lỗi xảy ra. Ví dụ,

// returns a promise
let countValue = new Promise(function (resolve, reject) {
   reject('Promise rejected'); 
});

// executes when promise is resolved successfully
countValue.then(
    function successValue(result) {
        console.log(result);
    },
 )

// executes if there is an error
.catch(
    function errorValue(result) {
        console.log(result);
    }
);

Đầu ra

Promise rejected

Trong chương trình trên, lời hứa bị từ chối. Và catch()phương thức được sử dụng với một lời hứa để xử lý lỗi.Hoạt động của chuỗi hứa hẹn JavaScript

Gọi lại lời hứa so với JavaScript

Promise tương tự như các hàm gọi lại theo nghĩa là cả hai đều có thể được sử dụng để xử lý các tác vụ không đồng bộ.

Các hàm gọi lại trong JavaScript cũng có thể được sử dụng để thực hiện các tác vụ đồng bộ.

Sự khác biệt của chúng có thể được tóm tắt ở những điểm sau:

Lời hứa JavaScript

1. Cú pháp thân thiện với người dùng và dễ đọc.
2. Xử lý lỗi dễ quản lý hơn.
3. Thí dụ: api().then(function(result) { return api2() ; }).then(function(result2) { return api3(); }).then(function(result3) { // do work }).catch(function(error) { //handle any error that may occur before this point });

Gọi lại JavaScript

1. Cú pháp khó hiểu.
2. Việc xử lý lỗi có thể khó quản lý.
3. Thí dụ: api(function(result){ api2(function(result2){ api3(function(result3){ // do work if(error) { // do something } else { // do something } }); }); });

Phương thức JavaScript cuối cùng ()

Bạn cũng có thể sử dụng finally()phương pháp với những lời hứa. Các finally()phương pháp được thực thi khi sự hứa hẹn là một trong hai giải quyết thành công hoặc bị từ chối. Ví dụ,

// returns a promise
let countValue = new Promise(function (resolve, reject) {
    // could be resolved or rejected   
    resolve('Promise resolved'); 
});

// add other blocks of code
countValue.finally(
    function greet() {
        console.log('This code is executed.');
    }
);

Đầu ra

This code is executed.

Phương thức hứa hẹn của JavaScript

Có nhiều phương thức khác nhau có sẵn cho đối tượng Promise.

Method	Decfscription
all(iterable)	Waits for all promises to be resolved or any one to be rejected
allSettled(iterable)	Waits until all promises are either resolved or rejected
any(iterable)	Returns the promise value as soon as any one of the promises is fulfilled
race(iterable)	Wait until any of the promises is resolved or rejected
reject(reason)	Returns a new Promise object that is rejected for the given reason
resolve(value)	Returns a new Promise object that is resolved with the given value
catch()	Appends the rejection handler callback
then()	Appends the resolved handler callback
finally()	Appends a handler to the promise

Để tìm hiểu thêm về các lời hứa một cách chi tiết, hãy truy cập JavaScript Promises .