Tìm hiểu về $q và Promise trong Angular

2278

$q và Promise trong Angular

Chắc hẳn mọi người đều đã từng nhìn thấy hoặc đã từng làm việc với $q khi sử dụng angular, chăng bạn có chắc đã nắm được hết những tính năng tuyệt với của nó mang lại như là $q.all() , $q.race(). Bài viết này mình sẽ nói về một vài điều hay ho về nó.

Promise là cái quái gì ?

Promise là một type đặc biệt của 1 Object có thể sử dụng hay để cấu trúc việc xử lý bất đồng bộ. Tại sao lại gọi nó là “Promise” có lẽ cũng giống như nghĩa của nó “hẹn ước” :)) nếu A hoàn thành thì B thực hiện, nó sẽ trả về 1 kết quả ở 1 thời điểm nào đó trong tương lai.

Một Promise có 3 trạng thái pending, resolvedrejected. Xử dụng $q trong Angular chúng ta có thể xấy dựng và xử lý được các promises của nó. (có lẽ nói đến đấy thấy hơi khó hiểu vì mình cũng ko hiểu mình đang nói cái … gì :)))

Để làm rõ cái “hồ mơ” trên thì chúng ta sẽ bắt đầu với 1 ví dụ làm quen với Promise trong ES2015.

ES5 Promises

Những cái chính đề cập tới ở đây sẽ là Promise, resolve, và reject

chúng ta chỉ cần khai báo new Promise() vào xử lý các tác vụ bất đồng bộ bên trong. Ví dụ

Giới thiệu $q

$q là một thành phần của AngularJS nó giống như Promise trong ES5. vì thế chúng ta có thể thực hiện như sau:

Khác thay vì new Promise() chúng ta chỉ cần $q() và cách thực hiện của nó trong 1 service ở angular như sau :

Chúng ta có thể tạo ra 1 đối tượng Promise như thế này :

chúng ta không nên tạo ra 1 đối tượng Promise như thế này vì nó sẽ tạo ra một đối tương Promise mới từ Promise đã tồn tại :

$q.defer()

Sử dụng $q.defer() như một thành phần nguyên thủy của $q, giống như cấu trúc của một Promise

$q.when() / $q.resolve()

Sử dụng $q.when() hoặc $q.resolve() ($q.resolve() là một alias của $q.when()) khi chúng ta muốn resolve một Promise từ Object không phải Promise.

$q.reject()

Sử dụng $q.reject() khi bạn muốn reject một Promise

$q.all()

Khi bạn cần resolve nhiều promise một lần bằng cách truyền vào 1 array các promise, cái này sẽ thực hiện .when() sau khi resolved

$q.race()

Tương tự như $q.all() phương thức $q.race() chỉ trả về 1 promise được resolve đầu tiên, ví dụ API 1 và API 2 cùng thực hiện, API 2 được resolve trước thì nó chỉ lấy Object được trả về từ API 2.

Kết luận

Bằng việc sử Promise và $q chúng ta có thể xử lý đựọc bất đồng bộ trong AngularJS, và sử dụng $q.all() hoặc $q.race() để xử lý các promise đã có.

Đây là những tìm hiểu của mình về Promise trong ES5 cũng như $q trong AngularJS nhằm giải quyết các vấn đề bất đồng bộ. hy vọng sẽ có ích cho mọi người.

Nếu có gì sai xót mọi người góp ý!.

Techtalk via viblo

CHIA SẺ