ใช้ความสำเร็จ / ข้อผิดพลาด / สุดท้าย / จับด้วยสัญญาใน AngularJS

ฉันกำลังใช้ $httpใน AngularJs และฉันไม่แน่ใจเกี่ยวกับวิธีใช้สัญญาที่ส่งคืนและจัดการข้อผิดพลาด

ฉันมีรหัสนี้:

$http
    .get(url)
    .success(function(data) {
        // Handle data
    })
    .error(function(data, status) {
        // Handle HTTP error
    })
    .finally(function() {
        // Execute logic independent of success/error
    })
    .catch(function(error) {
        // Catch and handle exceptions from success/error/finally functions
    });

วิธีนี้เป็นวิธีที่ดีหรือมีวิธีที่ง่ายกว่านี้ไหม

คำสัญญาเป็นสิ่งที่เป็นนามธรรมเหนือข้อความที่ช่วยให้เราสามารถแสดงตัวตนพร้อมกันกับรหัสอะซิงโครนัสได้ เป็นตัวแทนของการดำเนินงานครั้งเดียว

นอกจากนี้ยังมีการจัดการข้อยกเว้นเช่นเดียวกับรหัสปกติคุณสามารถกลับมาจากคำสัญญาหรือโยนได้

สิ่งที่คุณต้องการในรหัสซิงโครนัสคือ:

try{
  try{
      var res = $http.getSync("url");
      res = someProcessingOf(res);
  } catch (e) {
      console.log("Got an error!",e);
      throw e; // rethrow to not marked as handled
  }
  // do more stuff with res
} catch (e){
     // handle errors in processing or in error.
}

เวอร์ชันที่ได้รับการรับรองนั้นคล้ายกันมาก:

$http.get("url").
then(someProcessingOf).
catch(function(e){
   console.log("got an error in initial processing",e);
   throw e; // rethrow to not marked as handled, 
            // in $q it's better to `return $q.reject(e)` here
}).then(function(res){
    // do more stuff
}).catch(function(e){
    // handle errors in processing or in error.
});

ลืมเกี่ยวกับการใช้successและerrorวิธีการ

ทั้งสองวิธีนี้เลิกใช้แล้วในเชิงมุม 1.4 โดยพื้นฐานแล้วเหตุผลที่อยู่เบื้องหลังการเลิกใช้งานก็คือพวกเขาไม่ได้เป็นมิตรกับลูกโซ่ดังนั้นที่จะพูด

กับตัวอย่างต่อไปนี้ผมจะพยายามที่จะแสดงให้เห็นถึงสิ่งที่ฉันหมายถึงเกี่ยวกับsuccessและerrorไม่ถูกchainable ง่าย สมมติว่าเราเรียก API ที่ส่งคืนวัตถุผู้ใช้ด้วยที่อยู่:

วัตถุของผู้ใช้:

{name: 'Igor', address: 'San Francisco'}

โทรไปที่ API:

$http.get('/user')
    .success(function (user) {
        return user.address;   <---  
    })                            |  // you might expect that 'obj' is equal to the
    .then(function (obj) {   ------  // address of the user, but it is NOT

        console.log(obj); // -> {name: 'Igor', address: 'San Francisco'}
    });
};

เกิดอะไรขึ้น?

เพราะsuccessและerrorส่งคืนสัญญาเดิมนั่นคือสิ่งที่ส่งคืนโดย$http.getวัตถุที่ส่งผ่านไปยังการเรียกกลับของthenคือวัตถุผู้ใช้ทั้งหมดกล่าวคือการป้อนข้อมูลเดียวกันกับสิ่งที่อยู่ก่อนหน้าsuccessเรียกกลับนี้

ถ้าเราล่ามโซ่สองคนthenสิ่งนี้จะทำให้สับสนน้อยลง:

$http.get('/user')
    .then(function (user) {
        return user.address;  
    })
    .then(function (obj) {  
        console.log(obj); // -> 'San Francisco'
    });
};

ฉันคิดว่าคำตอบก่อนหน้านี้ถูกต้อง แต่นี่เป็นอีกตัวอย่างหนึ่ง (เพียงแค่ fyi, success () และ error () ถูกเลิกใช้ตามหน้าหลัก AngularJS :

$http
    .get('http://someendpoint/maybe/returns/JSON')
    .then(function(response) {
        return response.data;
    }).catch(function(e) {
        console.log('Error: ', e);
        throw e;
    }).finally(function() {
        console.log('This finally block');
    });

คุณกำลังมองหารายละเอียดประเภทใด โดยทั่วไปคุณสามารถทำได้โดย:

$http.get(url).then(
  //success function
  function(results) {
    //do something w/results.data
  },
  //error function
  function(err) {
    //handle error
  }
);

ฉันพบว่า "ในที่สุด" และ "จับใจ" จะดีกว่าเมื่อผูกมัดคำสัญญาหลาย ๆ

ในกรณี Angular $ http ฟังก์ชัน success () และ error () จะมีการปิดกั้นวัตถุตอบกลับดังนั้นลายเซ็นการเรียกกลับจะเป็นเหมือน $ http (... ). success (function (data, status, headers, config))

สำหรับแล้ว () คุณอาจจะจัดการกับวัตถุตอบสนองดิบ เช่นโพสต์ในเอกสาร AngularJS $ http API

$http({
        url: $scope.url,
        method: $scope.method,
        cache: $templateCache
    })
    .success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
    })
    .error(function(data, status) {
        $scope.data = data || 'Request failed';
        $scope.status = status;
    });

.catch (... ) สุดท้ายจะไม่ต้องการเว้นแต่จะมีข้อผิดพลาดใหม่เกิดขึ้นในห่วงโซ่สัญญาก่อนหน้านี้

ฉันทำเหมือน Bradley Braithwaite แนะนำในบล็อกของเขา:

app
    .factory('searchService', ['$q', '$http', function($q, $http) {
        var service = {};

        service.search = function search(query) {
            // We make use of Angular's $q library to create the deferred instance
            var deferred = $q.defer();

            $http
                .get('http://localhost/v1?=q' + query)
                .success(function(data) {
                    // The promise is resolved once the HTTP call is successful.
                    deferred.resolve(data);
                })
                .error(function(reason) {
                    // The promise is rejected if there is an error with the HTTP call.
                    deferred.reject(reason);
                });

            // The promise is returned to the caller
            return deferred.promise;
        };

        return service;
    }])
    .controller('SearchController', ['$scope', 'searchService', function($scope, searchService) {
        // The search service returns a promise API
        searchService
            .search($scope.query)
            .then(function(data) {
                // This is set when the promise is resolved.
                $scope.results = data;
            })
            .catch(function(reason) {
                // This is set in the event of an error.
                $scope.error = 'There has been an error: ' + reason;
            });
    }])

ประเด็นสำคัญ:

• ฟังก์ชันแก้ไขจะเชื่อมโยงไปยังฟังก์ชัน. then ในคอนโทรลเลอร์ของเรานั่นคือทุกอย่างเรียบร้อยดีดังนั้นเราจึงสามารถรักษาสัญญาและแก้ไขได้

• ฟังก์ชันปฏิเสธจะเชื่อมโยงไปยังฟังก์ชัน. จับในตัวควบคุมของเรานั่นคือมีบางอย่างผิดพลาดเราจึงไม่สามารถรักษาสัญญาและจำเป็นต้องปฏิเสธมัน

ค่อนข้างเสถียรและปลอดภัยและหากคุณมีเงื่อนไขอื่น ๆ ที่จะปฏิเสธคำสัญญาคุณสามารถกรองข้อมูลของคุณในฟังก์ชันความสำเร็จและโทรหาdeferred.reject(anotherReason)ด้วยเหตุผลของการปฏิเสธได้

ตามที่ Ryan Vice แนะนำในความคิดเห็นสิ่งนี้อาจไม่ถูกมองว่ามีประโยชน์เว้นแต่คุณจะตอบสนองเล็กน้อยเพื่อที่จะพูด

เพราะsuccessและerrorมีการเลิกใช้ตั้งแต่ 1.4 บางทีมันอาจจะดีกว่าที่จะใช้วิธีการสัญญาปกติthenและcatchและเปลี่ยนการตอบสนองภายในวิธีการเหล่านั้นและกลับสัญญาของการตอบสนองที่เปลี่ยน

ฉันกำลังแสดงตัวอย่างเดียวกันกับทั้งสองวิธีและวิธีที่สามระหว่างกัน:

successและerrorวิธีการ ( successและerrorส่งคืนสัญญาของการตอบสนอง HTTP ดังนั้นเราต้องการความช่วยเหลือใน$qการคืนสัญญาข้อมูล):

function search(query) {
  // We make use of Angular's $q library to create the deferred instance
  var deferred = $q.defer();

  $http.get('http://localhost/v1?=q' + query)
  .success(function(data,status) {
    // The promise is resolved once the HTTP call is successful.
    deferred.resolve(data);              
  })

  .error(function(reason,status) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.error){
      deferred.reject({text:reason.error, status:status});
    }else{
      //if we don't get any answers the proxy/api will probably be down
      deferred.reject({text:'whatever', status:500});
    }
  });

  // The promise is returned to the caller
  return deferred.promise;
};

thenและcatchเข้าใกล้ (นี่เป็นการทดสอบที่ยากกว่าเล็กน้อยเนื่องจากการขว้าง):

function search(query) {

  var promise=$http.get('http://localhost/v1?=q' + query)

  .then(function (response) {
    // The promise is resolved once the HTTP call is successful.
    return response.data;
  },function(reason) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.statusText){
      throw reason;
    }else{
      //if we don't get any answers the proxy/api will probably be down
      throw {statusText:'Call error', status:500};
    }

  });

  return promise;
}

มีวิธีแก้ปัญหาครึ่งทาง (วิธีนี้คุณสามารถหลีกเลี่ยงthrowและอย่างไรก็ตามคุณอาจต้องใช้$qเพื่อเยาะเย้ยพฤติกรรมสัญญาในการทดสอบของคุณ):

function search(query) {
  // We make use of Angular's $q library to create the deferred instance
  var deferred = $q.defer();

  $http.get('http://localhost/v1?=q' + query)

  .then(function (response) {
    // The promise is resolved once the HTTP call is successful.
    deferred.resolve(response.data);
  },function(reason) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.statusText){
      deferred.reject(reason);
    }else{
      //if we don't get any answers the proxy/api will probably be down
      deferred.reject({statusText:'Call error', status:500});
    }

  });

  // The promise is returned to the caller
  return deferred.promise;
}

ยินดีรับฟังความคิดเห็นหรือการแก้ไขใด ๆ