Tìm hiểu về Promise trong AngularJs

Bài đăng này đã không được cập nhật trong 7 năm

Trong phần này chúng ta sẽ tìm hiểu về cách sử dụng Promise trong AngularJS. Promise trong AngularJs được cung cấp qua service xây dựng sẵn $q . Chúng giúp chúng ta có thể có thể thực hiện các chức năng không đồng bộ một cách dễ dàng bằng cách đưa vào một đối tượng promise.

Trước hết chúng ta khai báo một ứng dụng viết bằng html và sử dụng thư viên AngularJS

<html>
    <head>
        <title>Giới thiệu về Promise</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-app="myApp">
    </body>
</html>

file app.js

function getData($timeout, $q) {
  return function() {
    var defer = $q.defer()
    $timeout(function() {
    }, 2000)
    return defer.promise
  }
}

angular.module('myApp', [])
.factory('getData', getData)
.run(function(getData) {
  var promise = getData()
})

Để cho khách quan, chúng ta sẽ sử dụng service $timeout để mô phỏng chức năng không đồng bộ và trên thực tế các hàm ajax sử dụng service ``$http` thì chúng ta thường sử dụng promise để lấy dữ liệu.

Khai báo đối tượng hoãn Một đối tượng trì hoãn là một đối tượng đưa ra một thực thi và các phương pháp giải quyết thực thi đó. Nó được xây dựng bằng cách sử dụng phương thức $q.deferred(), cùng với 3 phương pháp chính resolve(), reject(), and notify() trong đó resolve() được đưa ra khi muôn kết thúc một promise nào đó.

function getData($timeout, $q) {
  return function() {
    var defer = $q.defer()
    $timeout(function() {
      defer.resolve('test')
    }, 2000)
    return defer.promise
  }
}

ở đây, chúng ta sẽ tạo một đối tượng promise với phương thức defer, sau khi chúng ta thực thi xong các function bất đồng bộ, chúng ta sẽ sử dụng resolve() để thông báo kết thúc promise và truyên thông số đến hàm callback(). Đối tượng Promise Giả sử chúng ta đã có một hàm promise đã được khai báo(hàm getData() đã được khai báo ở trên).Để sử dụng hàm callback sau khi một hàm promise thi chúng ta sẽ sử dụng hàm .then() để lấy các thuộc tính được trả về từ hàm getData()

.run(function(getData) {
  var promise = getData()
    .then(function(string) {
      console.log(string)
    })
})

chúng ta sẽ nhận được dòng chữ test mà chúng ta đã trả về từ hàm getData(). Từ chối một promise Chúng ta đã nhìn một promise được xử lý thành công, nhưng nếu các chức năng đồng bộ thất bại thì sao, nếu xảy ra trường hợp trên chúng ta sẽ sử dụng hàm reject() để giải quyết thay vị sử dụng hàm resolve.

function getData($timeout, $q) {
  return function() {
    var defer = $q.defer();
    $timeout(function() {
      if(Math.round(Math.random())) {
        defer.resolve('Test thanh cong!');
      } else {
        defer.reject('Test loi');
      }
    }, 2000)
    return defer.promise;
  }
}

Chúng ta sẽ sử dụng một hàm callback trong parameter thứ hai của hàm then() để điều khiên khi có lỗi xảy ra

.run(function(getData) {
  var promise = getData()
    .then(function(string) {
      console.log(string)
    }, function(error) {
      console.error(error)
    })
})

refesh lại trình duyệt, chúng ta se thấy dòng chứ test lỗi hiện ra. Sử dụng $q service $q là một chức năng giúp chúng ta có thể nhanh chóng chuyên đổi một hàm không đồng bộ vào trong một promise.

function getData($timeout, $q) {
  return function() {
    return $q(function(resolve, reject) {
      $timeout(function() {
        if(Math.round(Math.random())) {
          resolve('test thanh cong')
        } else {
          reject('test loi')
        }
      }, 2000)
    })
  }
}

Phương thức finally() Trong phương thức then() chúng ta có thể điều khiển khi các chức năng trong promise thực hiện thành công hay thất bại, hai cái không thể đồng thời xảy ra. nhưng nêu như chúng ta muốn đảm bảo là chức năng trong promise đã thực hiện xong dù có lỗi hay không thì chúng ta cần sử dụng phương thức finally().

.run(function(getData) {
  var promise = getData()
    .then(function(string) {
      console.log(string)
    }, function(error) {
      console.error(error)
    })
    .finally(function() {
      console.log('Kêt thúc at:', new Date())
    })
})

Chúng ta sẽ nhìn thấy thời gian mà promise kêt thúc ở trên màn hinh dù cho promise được resolve hay reject.

Mục lục