ใช้ $q กับ $http.post ใน Angular.js

$http.post ใน Angular.js มันก็เอาไว้เรียก HTTP request ที่แน่นอนเป็น async


function ReqCtrl($scope, $http) {
  $scope.seq = "Seq: "
  $http.post('/echo/json/', "delay=2&json={\"x\":10}").success(function (data) {
    $scope.seq += " " + data.x;
  });

  $http.post('/echo/json/', "json={\"x\":20}").success(function (data) {
    $scope.seq += " " + data.x;
  });

  $http.post('/echo/json/', "json={\"x\":30}").success(function (data) {
    $scope.seq += " " + data.x;
  });
}

แบบ code ข้างบนนี่มันก็จะรับประกันไม่ได้ว่า อันไหนจะทำงานก่อนทำงานหลัง ลองเล่นดูที่นี้ได้ http://jsfiddle.net/veer66/KXDX6/

คือจริง ๆ จะเขียนแบบซ้อน ๆ กันไปเลยก็ได้ แต่ว่ามันก็จะซ้อนกัน😛 … เรามีทางเลือกอื่นคือใช้  Q  แต่ว่า Angular.js มี $q ให้ในตัวเลย เขียนแบบข้างล่าง


function ReqCtrl($scope, $http, $q) {
  $scope.seq = "Seq: "
  var deferred = $q.defer();
  var promise = deferred.promise;
  deferred.resolve("nothing");
  
  promise.then(function(promise) {
    return $http.post('/echo/json/',
                      "delay=2&json={\"x\":10}").success(
                                     function (data) {
                                        $scope.seq += " " + data.x;
                                     });
  }).then(function(promise) {
      $http.post('/echo/json/', "json={\"x\":20}").success(
                                          function (data) {
                                             $scope.seq += " " + data.x;
                                          });
  }).then(function(promise) {
      $http.post('/echo/json/', "json={\"x\":30}").success(
                                          function (data) {
                                             $scope.seq += " " + data.x;
                                          });
  });
}

ลองเล่นได้ที่ http://jsfiddle.net/veer66/nxJFH/ จะเห็นได้ว่ามันเรียง 10 20 30 … อันนี้มันใช้ได้ เพราะว่า $http.post มัน return promise ออกมา ในสิ่งที่ถูก return ออกมาจาก function ใน then มันจะถูก check ว่าเป็น promise หรือเปล่าถ้าเป็นมันก็จะใช้ promise นั้นเลย ไม่สร้างใหม่ ถ้าเรา return string หรือ integer หรืออะไรอื่น ๆ มันจะไปสร้าง promise มาครอบให้

เพราะว่ามันใช้ promise เดิม เลยทำให้ $http.post แต่ละตัวเชื่อมกันเป็นลำดับได้

3 thoughts on “ใช้ $q กับ $http.post ใน Angular.js

      1. เป็นเพราะว่า .then ตัวที่ 2-3 ไม่มีการ return ค่าที่ได้จาก $http ครับ
        มันก็เลยข้ามไป .then ตัวต่อไปโดยที่ไม่รอให้ $http ทำงานเสร็จก่อน
        ลองใส่คำว่า return หน้าบรรทัดที่ 13 กับ 18 ดูครับ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s