Tạp Chí Đồ Họa Việt Nam

Xử lý bất đồng bộ trong Javascript

Xử lý bất đồng bộ trong Javascript – Như các bạn đã biết, chúng ta có nhiều cách để xử lý các thao tác bất đồng bộ trong javascript, trong đó, cách quen thuộc nhất chính là callback function.

Xử lý bất đồng bộ trong Javascript

Xử lý bất đồng bộ trong Javascript Xử lý bất đồng bộ trong Javascript
Xử lý bất đồng bộ trong Javascript

Tuy nhiên việc sử dụng nhiều callback function sẽ dẫn đến nhiều điều không lường trước ví dụ như khi chúng ta có quá nhiều tác vụ bất đồng bộ cần thực hiện liên tiếp nhau (tác vụ trước là tham số của tác vụ sau). Điều này sẽ dẫn đến callback hell, gây khó khăn cho việc debug và bảo trì. Đến phiên bản ES6 Promise đã được đưa vào nâng cao việc xử lý bất đồng bộ. Và đến ES7 thì Async / Await được tạo ra để xử lý bất đồng bộ giúp code trông gọn gàng hơn.

Promise là gì ?

Đối tượng Promise đại diện cho việc hoàn thành (hoặc không hoàn thành) cuối của một hoạt động bất đồng bộ. Promise đúng như tên của nó là một lời hứa hiểu nôm na là hứa thực hiện một việc nào đó, có thể thành công hoặc không thành công đó là kết của lời hứa. Kết quả này chỉ có giá trị cho lời hứa.

Syntax

new Promise( /* executor */ function(resolve, reject) { ... } );

Parameters

Phương thức khởi tạo chỉ có 1 đối số là một hàm thực thi (executor). Về phía hàm thực thi lại nhận 2 hàm callback làm đối số. Cả 2 hàm callback này đều là callback không đồng bộ. Điều đó có nghĩa là chúng được thực thi sau khi executor đã thực thi xong.Các resolve và reject function, khi được gọi sẽ giải quyết hoặc từ chối lời hứa một cách tương ứng. Người thực hiện thường khởi tạo một số công việc không đồng bộ và sau đó, một khi hoàn thành sẽ gọi hàm resolve để giải quyết lời hứa hoặc reject nó nếu xảy ra lỗi.

Description

Túm lại Promise là một lời hứa, khi thực hiên thành công lời hưá thì sẽ làm gì, điều này được hiện trong function resolve, khi lời hứa thất bại sẽ làm gì điều này thực hiện trong function reject.

var promise = new Promise(function(resolve, reject){
    resolve('Success');
    // OR
    reject('Error');
});

Promise có 3 trạng thái là pedding, fulfilled và rejected. Promise sẽ có một trong ba trạng thái trên, nó được thể hiện trong PromiseStatus.3 trạng thái này là như nào thì chúng ta có thể hiểu đơn giản như này nhé:

  • pedding: là một lời hứa đang chờ giải quyết. Nó chưa được thực hiện resolve hay reject.
  • fulfilled: là một lời hứa đã được thực hiện thành công. Đây là trạng thái xảy ra khi sử dụng resolve.
  • rejected: là một lời hứa đã được thực hiện nhưng mà nó không thành công đâu. Đây là trạng thái nhận được khi sử dụng reject.

Một lời hứa pedding đang chờ giải quyết có thể được hoàn thành fulfilled với một giá trị, hoặc bị từ chối rejected với một lý do (error). Khi một trong hai tùy chọn này xảy ra, các trình xử lý liên quan được xếp hàng đợi bởi then method của lời hứa được gọi.

Promise.prototype.then()Promise.prototype.catch() trả về một lời hứa, chúng có thể bị móc nối với nhau.

Xử lý bất đồng bộ trong Javascript Xử lý bất đồng bộ trong Javascript
Xử lý bất đồng bộ trong Javascript

Thenable

Thenable đơn giản là đối tượng phương thức then. Phương thức này sẽ nhận 1 hoặc 2 đối số là resolve hay reject.

promise.then(
    function onFulfill(value) {
        // do something with value
    }, function onReject(reason) {
        // handle error
    }
);

Nhưng để thenable có thể là promise thì thenable đó phải thỏa mãn:
– Hàm then lại trả về một promise khác.
– Nếu hàm then trả về một giá trị không thenable thì giá trị đó được chuyển thành một promise được fulfill ngay lập tức.
2 điều trên cho phép một promise được then liên hoàn (chaining) một cách tuần tự.

promise.then(function(){
        // do onFulfill
}).then(function() {
        // do more
});

Catch

catch cũng là một phương thức của promise giống như then nhưng nó chỉ được dùng để bắt lỗi, tức là chỉ dùng khi promise thực hiện reject.

promise.then(function(sucess){
        // success
}).catch(function(error) {
        // error
});

async function

async function định nghĩa một hàm bất đồng bộ, trả về một đối tượng AsyncFunction.
Cũng có thể định nghĩa async function sử dụng async function expression.

Syntax

async function name([param[, param[, ... param]]]) {
   statements
}

Parameters
– name: Tên function.
– param: Tên của đối số được truyền vào function.
– statements: Các câu lệnh được thực thi trong function.
Return value
Một đối tượng AsyncFunction, đại diện cho một hàm bất đồng bộ thực hiện lệnh chứa trong hàm.

Description

  • Khi một hàm async được gọi, nó sẽ trả về một Promise. Khi hàm async trả về một giá trị, Promise sẽ được giải quyết (resolved ) với các giá trị được trả về. Khi hàm async ném một ngoại lệ hoặc một số giá trị, Promise sẽ bị từ chối (rejected) với giá trị được ném ra. Async chính là dựa trên Promise phát triển tạo nên.
  • Hàm async có thể chứa một biểu thức await, mà tạm dừng việc thực hiện các hàm async và chờ đợi cho các giải quyết Promised thông qua, sau đó tiếp tục thực hiện hàm async và trả về giá trị được giải quyết. Await chỉ được thực hiện bên trong async
async  function  excute () {
      let ex = await doAdd(); 

      return ex;
 }

Bài viết có tham khảo nội dung tại:

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function