चेनिंग अजाक्स AngularJs

Question

में कॉल करता है मैं एक श्रृंखला में एकाधिक अजाक्स कॉल करना चाहता हूं। लेकिन मैं अगली कॉल करने से पहले प्रत्येक कॉल के बाद भी डेटा मालिश करना चाहता हूं। अंत में, जब सभी कॉल सफल हैं, तो मैं कुछ अन्य कोड चलाने के लिए चाहता हूं।

मैं अपने अजाक्स कॉल के लिए कोणीय $ http सेवा का उपयोग कर रहा हूं और उस पर चिपकना चाहता हूं।

क्या यह संभव है?

Answer 1

हां, यह AngularJS द्वारा बहुत सुंदर ढंग से संभाला जाता है क्योंकि इसकी $http सेवा PromiseAPI के आसपास बनाई गई है। असल में, $http विधियों को कॉल करने का वादा वापस आता है और आप then विधि का उपयोग कर श्रृंखला आसानी से वादे कर सकते हैं। यहाँ एक उदाहरण है:

$http.get('http://host.com/first') 
    .then(function(result){ 
    //post-process results and return 
    return myPostProcess1(result.data); 
    }) 
    .then(function(resultOfPostProcessing){ 
    return $http.get('http://host.com/second'); 
    }) 
    .then(function(result){ 
    //post-process results of the second call and return 
    return myPostProcess2(result.data); 
    }) 
    .then(function(result){ 
     //do something where the last call finished 
    }); 

तुम भी रूप में अच्छी तरह पोस्ट-प्रोसेसिंग और अगले $http समारोह जोड़ सकता है, यह सब जो परिणाम में रुचि रखता है पर निर्भर करता है।

$http.get('http://host.com/first') 
    .then(function(result){ 
    //post-process results and return promise from the next call 
    myPostProcess1(result.data); 
    return $http.get('http://host.com/second'); 
    }) 
    .then(function(secondCallResult){ 
    //do something where the second (and the last) call finished 
    }); 

Answer 2

स्वीकार्य उत्तर अच्छा है, लेकिन यह पकड़ और आखिरकार विधियों की व्याख्या नहीं करता है जो वास्तव में केक पर टुकड़े टुकड़े करते हैं। यह great article on promises मुझे सीधे सेट करें। यहां उस आलेख के आधार पर कुछ नमूना कोड दिए गए हैं:

$scope.spinner.start(); 

$http.get('/whatever/123456') 
    .then(function(response) { 
    $scope.object1 = response.data; 
    return $http.get('/something_else/?' + $scope.object1.property1); 
    }) 
    .then(function(response) { 
    $scope.object2 = response.data; 
    if ($scope.object2.property88 == "a bad value") 
     throw "Oh no! Something failed!"; 
    return $http.get('/a_third_thing/654321'); 
    }) 
    .then(function(response) { 
    $scope.object3 = response.data; 
    }) 
    .catch(function(error) { 
    // this catches errors from the $http calls as well as from the explicit throw 
    console.log("An error occured: " + error); 
    }) 
    .finally(function() { 
    $scope.spinner.stop(); 
    });