Angular.js

Trong Angular.js, thì promise là một giao diện tương tác với các đối tượng mà chúng ta sẽ nhận được thông tin của chúng ở thời điểm tương lai (về cơ bản, đây là những hành động không đồng bộ). Bản chất, promise là đối tượng có phương thức then(…) có thể hoạt động theo chuỗi, dạng:

.then(...).then(...)

Để thấy được những lợi thế của nó, hãy xem một ví dụ mà chúng ta sẽ lấy thông tin hồ sơ của một user, như sau:

var currentProfile = null;
var username = 'something';
fetchServerConfig(function(serverConfig) {
    fetchUserProfiles(serverConfig.USER_PROFILES, username,
        function(profiles) {
            currentProfile = profiles.currentProfile;
        });
});

Có một vài vấn đề theo cách tiếp cận trên:

  1. Mã nguồn của dự án sẽ gặp ác mộng với các khoảng thụt đầu dòng, đặc biệt là khi chúng ta có hàng loạt chuỗi lời gọi hàm, khó cho việc review mã nguồn và theo dõi luồng nghiệp vụ ứng dụng.
  2. Các thông báo lỗi ở giữa callbacks và functions có xu hướng bị mất, trừ khi bạn xử lý lỗi thủ công tại mỗi bước.
  3. Cần phải đóng gói nghiệp vụ thao tác với currentProfile ở trong hàm callback sâu nhất, hoặc một cách trực tiếp, hoặc thông qua hàm chuyên biệt sẵn có.

Promises giải quyết được các vấn đề này. Hãy xem cách promises xử lý cùng vấn đề đó như sau:

var currentProfile =
    fetchServerConfig().then(function(serverConfig) {
        return fetchUserProfiles(serverConfig.USER_PROFILES, username);
    }).then(function(profiles) {
        return profiles.currentProfile;
    }, function(error) {
        // Handle errors in either fetchServerConfig or
        // fetchUserProfiles here
    });

Ok, chúng ta nhận thấy những lợi thế sau đây:

  1. Có thể gọi hàng loạt chuỗi hàm, mà không phải lo đến các khoảng thụt đầu dòng.
  2. Đảm bảo được rằng các hàm phía trước đã được thực hiện hoàn tất trước khi các hàm then(…) tiếp theo trong chuỗi được gọi.
  3. Mỗi hàm then(…) đều có 2 tham số. Tham số thứ nhất là lời gọi hàm khi hàm trước nó được thực hiện thành công và tham số thứ 2 là hàm sẽ được gọi khi hàm thực hiện trước nó có lỗi xảy ra.
  4. Trong trường hợp có lỗi xảy ra trong chuỗi, lỗi này sẽ được lan truyền ngược qua các hàm xử lý lỗi. Do đó, bất kỳ lỗi nào trong bất kỳ một callback có thể được xử lý ở cuối cùng của chuỗi hàm.

Còn resolve và reject thì sao ? Trong Angular.js defer sẽ tạo ra các promises. Chúng ta sẽ gọi resolve khi thực hiện toàn bộ lời hứa hẹn promise (xử lý thành công), hoặc sẽ gọi reject trong hàm xử lý lỗi của promise.

Trên đây là một hướng tiếp cận dựa vào Promise trong Angular.js để làm đơn giản và tối ưu mã nguồn javascript.
Học và vọc thêm Promises tại https://docs.angularjs.org/api/ng/service/$q

About The Author