AngularJS
$ Q सेवा के साथ कोणीय वादे

कई वादों को संभालने के लिए $ q.all का उपयोग करना

आप उपयोग कर सकते हैं $q.all एक कॉल करने के लिए समारोह .then बाद वादों की एक सरणी सफलतापूर्वक हल किया गया है विधि और डेटा वे के साथ हल लाने।

उदाहरण:

जे एस:

 $scope.data = []

 $q.all([
    $http.get("data.json"),
    $http.get("more-data.json"),
    ]).then(function(responses) {
      $scope.data = responses.map((resp) => resp.data);
    });

उपरोक्त कोड चलाता है $http.get स्थानीय json फ़ाइलों में डेटा के लिए 2 बार, जब दोनों get विधि, वे अपने जुड़े वादे, हल को पूरा जब सरणी में सभी वादों हल कर रहे हैं .then अंदर दोनों वादों डेटा के साथ विधि शुरू होता है responses सरणी तर्क।

इसके बाद डेटा को मैप किया जाता है ताकि इसे टेम्प्लेट पर दिखाया जा सके, हम फिर दिखा सकते हैं

HTML:

<ul>
   <li ng-repeat="d in data">
      <ul>
         <li ng-repeat="item in d">{{item.name}}: {{item.occupation}}</li>
      </ul>
   </li>
</ul>

JSON:

[{
  "name": "alice",
  "occupation": "manager"
}, {
  "name": "bob",
  "occupation": "developer"
}]

वादे बनाने के लिए $ q कंस्ट्रक्टर का उपयोग करना

$q कंस्ट्रक्टर फ़ंक्शन का उपयोग अतुल्यकालिक एपीआई से वादे बनाने के लिए किया जाता है जो परिणामों को वापस करने के लिए कॉलबैक का उपयोग करते हैं।

$ q (फ़ंक्शन (समाधान, अस्वीकार) {...})

कंस्ट्रक्टर फ़ंक्शन एक फ़ंक्शन प्राप्त करता है जिसे दो तर्कों के साथ लागू किया जाता है, resolve और reject किए जाने वाले फ़ंक्शन हैं जो वादे को हल करने या अस्वीकार करने के लिए उपयोग किए जाते हैं।

उदाहरण 1:

function $timeout(fn, delay) {
    return = $q(function(resolve, reject) {
         setTimeout(function() {
              try {
                 let r = fn();
                 resolve(r);
              } 
              catch (e) {
                 reject(e);
              }
         }, delay);
     };
}
    

उपरोक्त उदाहरण WindowTimers.setTimeout एपीआई से एक वादा करता है । AngularJS फ्रेमवर्क इस फ़ंक्शन का अधिक विस्तृत संस्करण प्रदान करता है। उपयोग के लिए, AngularJS $ टाइमआउट सेवा API संदर्भ देखें ।

उदाहरण 2:

$scope.divide = function(a, b) {
    return $q(function(resolve, reject) {
      if (b===0) {
        return reject("Cannot devide by 0")
      } else {
        return resolve(a/b);
      }
    });
}

उपर्युक्त कोड एक प्रांतीय विभाजन फ़ंक्शन दिखा रहा है, यह परिणाम के साथ एक वादा लौटाएगा या गणना असंभव होने पर एक कारण के साथ अस्वीकार कर देगा।

तब आप कॉल कर सकते हैं और उपयोग कर सकते .then

$scope.divide(7, 2).then(function(result) {
    // will return 3.5
}, function(err) {
    // will not run
})

$scope.divide(2, 0).then(function(result) {
    // will not run as the calculation will fail on a divide by 0
}, function(err) {
    // will return the error string.
})

$ Q.defer का उपयोग करके संचालन का पता लगाएं

हम वर्तमान में लंबित वादे की वस्तु होने के दौरान भविष्य में ऑपरेशन को स्थगित करने के लिए $q का उपयोग कर सकते हैं। $q $q.defer का उपयोग करके हम एक ऐसा वादा करते हैं जो भविष्य में या तो हल करेगा या अस्वीकार करेगा।

यह विधि $q कंस्ट्रक्टर का उपयोग करने के बराबर नहीं है, क्योंकि हम एक मौजूदा दिनचर्या को बढ़ावा $q.defer लिए $q.defer का उपयोग करते हैं जो कि एक वादा कर सकता है या वापस नहीं लौट सकता है (या कभी वापस नहीं आया)।

उदाहरण:

var runAnimation = function(animation, duration) {
    var deferred = $q.defer();
    try {
        ...
        // run some animation for a given duration
        deferred.resolve("done");
    } catch (err) {
        // in case of error we would want to run the error hander of .then
        deferred.reject(err);
    }
    return deferred.promise;
}

// and then
runAnimation.then(function(status) {}, function(error) {})

1. सुनिश्चित करें कि आप हमेशा एक deferred.promise ऑब्जेक्ट को .then करते समय या त्रुटि का जोखिम उठाते हैं। तब

2. सुनिश्चित करें कि आप हमेशा अपनी आस्थगित वस्तु को हल या अस्वीकार करते हैं या .then नहीं चल सकता है और आप एक मेमोरी रिसाव का जोखिम उठाते हैं

$ Q सेवा के साथ कोणीय वादों का उपयोग करना

$q एक अंतर्निहित सेवा है जो प्रसंस्करण के समाप्त होने पर अतुल्यकालिक कार्यों को निष्पादित करने और उनके रिटर्न मान (या अपवाद) का उपयोग करने में मदद करता है।

$q को $rootScope.Scope मॉडल अवलोकन तंत्र के साथ एकीकृत किया गया है, जिसका अर्थ है कि आपके मॉडलों में रिज़ॉल्यूशन या अस्वीकृति का तेजी से प्रसार और अनावश्यक ब्राउज़र repaints से बचना, जिसके परिणामस्वरूप UI फ़्लिकर हो जाएगा।

हमारे उदाहरण में, हम अपने कारखाने getMyData कॉल करते हैं, जो एक वादा वस्तु वापस करते हैं। यदि ऑब्जेक्ट resolved , तो यह एक यादृच्छिक संख्या देता है। यदि इसे rejected , तो यह 2 सेकंड के बाद एक त्रुटि संदेश के साथ अस्वीकृति लौटाता है।

कोणीय कारखाने में

function getMyData($timeout, $q) {
  return function() {
    // simulated async function
    var promise = $timeout(function() {
      if(Math.round(Math.random())) {
        return 'data received!'
      } else {
        return $q.reject('oh no an error! try again')
      }
    }, 2000);
    return promise;
  }
}

कॉल पर वादे का उपयोग करना

angular.module('app', [])
.factory('getMyData', getMyData)
.run(function(getData) {
  var promise = getData()
    .then(function(string) {
      console.log(string)
    }, function(error) {
      console.error(error)
    })
    .finally(function() {
      console.log('Finished at:', new Date())
    })
})

वादों का उपयोग करने के लिए, निर्भरता के रूप में $q इंजेक्ट करें। यहाँ हमने getMyData फैक्ट्री में $q इंजेक्ट किया।

var defer = $q.defer();

$q.defer() कॉल करके आस्थगित का एक नया उदाहरण बनाया गया है

आस्थगित वस्तु बस एक वस्तु है जो किसी वादे के साथ-साथ उस वादे को हल करने के लिए संबद्ध विधियों को उजागर करती है। यह $q.deferred() फ़ंक्शन का उपयोग करके बनाया गया है और तीन मुख्य तरीकों को उजागर करता है: $q.deferred() resolve() , reject() , और notify() ।

• resolve(value) - मान के साथ व्युत्पन्न वादा हल करता है।
• reject(reason) - कारण के साथ व्युत्पन्न वादा को अस्वीकार करता है।
• notify(value) - वादे के निष्पादन की स्थिति पर अपडेट प्रदान करता है। वादे के हल होने या अस्वीकार होने से पहले इसे कई बार कहा जा सकता है।

गुण

संबंधित वादा वस्तु को वादा संपत्ति के माध्यम से एक्सेस किया जाता है। promise - {वादा} - इस आस्थगित से जुड़ा वादा वस्तु।

जब एक स्थगित उदाहरण बनाया जाता है और deferred.promise को कॉल करके पुनर्प्राप्त किया जा सकता है, तो एक नया वादा उदाहरण बनाया जाता है।

promise उद्देश्य का उद्देश्य इच्छुक दलों के लिए काम पूरा होने के बाद स्थगित कार्य के परिणाम तक पहुंच प्राप्त करना है।

वादे के तरीके -

• then(successCallback, [errorCallback], [notifyCallback]) - भले ही जब वादा किया गया था या हल किया जाएगा या खारिज कर दिया जाएगा, तो परिणाम उपलब्ध होते ही सफलता या त्रुटि कॉलबैक में से एक को अतुल्यकालिक रूप से कॉल करें। कॉलबैक को एकल तर्क के साथ कहा जाता है: परिणाम या अस्वीकृति का कारण। वादे के हल होने या अस्वीकार होने से पहले, सूचित कॉलबैक शून्य या अधिक बार कहा जा सकता है।

• catch(errorCallback) - वादा के लिए आशुलिपि। (अशक्त, errorCallback)

• finally(callback, notifyCallback) - आपको किसी वादे की पूर्ति या अस्वीकृति का निरीक्षण करने की अनुमति देता है, लेकिन अंतिम मूल्य को संशोधित किए बिना ऐसा करने के लिए।

वादों की सबसे शक्तिशाली विशेषताओं में से एक उन्हें श्रृंखलाबद्ध करने की क्षमता है। यह डेटा को श्रृंखला में प्रवाह करने और प्रत्येक चरण में हेरफेर और उत्परिवर्तित करने की अनुमति देता है। यह निम्नलिखित उदाहरण के साथ प्रदर्शित किया जाता है:

उदाहरण 1:

// Creates a promise that when resolved, returns 4.
function getNumbers() {

  var promise = $timeout(function() {
    return 4;
  }, 1000);
  
  return promise;
}

// Resolve getNumbers() and chain subsequent then() calls to decrement
// initial number from 4 to 0 and then output a string.
getNumbers()
  .then(function(num) {
      // 4
      console.log(num);
      return --num;
  })
  .then(function (num) {
      // 3
      console.log(num);
      return --num;
  })
   .then(function (num) {
      // 2
      console.log(num);
      return --num;
  })
  .then(function (num) {
      // 1
      console.log(num);
      return --num;
  })
  .then(function (num) {
      // 0
      console.log(num);
      return 'And we are done!';
  })
  .then(function (text) {
      // "And we are done!"
      console.log(text);        
  });

$ Q.when () का उपयोग करके वादे में साधारण मूल्य लपेटें

यदि आप सभी की जरूरत है कि मूल्य को एक वादे में लपेटें, तो आपको यहां की तरह लंबे वाक्यविन्यास का उपयोग करने की आवश्यकता नहीं है:

//OVERLY VERBOSE
var defer;
defer = $q.defer();
defer.resolve(['one', 'two']);
return defer.promise;

इस मामले में आप बस लिख सकते हैं:

//BETTER
return $q.when(['one', 'two']);

$ q.when और इसका उपनाम $ q.resolve है

एक वस्तु को लपेटता है जो एक मूल्य (या 3 पार्टी) हो सकता है फिर एक $ q वादे में सक्षम वादा करता है। यह तब उपयोगी होता है जब आप एक ऐसी वस्तु के साथ काम कर रहे होते हैं जो एक वादा हो सकती है या नहीं भी हो सकती है, या यदि कोई ऐसा स्रोत आता है, जिस पर भरोसा नहीं किया जा सकता है।

- AngularJS $ q सेवा एपीआई संदर्भ - $ q.when

AngularJS v1.4.1 की रिहाई के साथ

आप ईएस 6-संगत उर्फ resolve उपयोग भी कर सकते हैं

//ABSOLUTELY THE SAME AS when
return $q.resolve(['one', 'two'])

$ Q डिफर्ड एंटी-पैटर्न से बचें

इस एंटी-पैटर्न से बचें

var myDeferred = $q.defer();

$http(config).then(function(res) {  
   myDeferred.resolve(res);
}, function(error) {
   myDeferred.reject(error);
});

return myDeferred.promise;

$q.defer साथ वादे के निर्माण की कोई आवश्यकता नहीं है क्योंकि $ http सेवा पहले ही एक वादा वापस कर देती है।

//INSTEAD
return $http(config);

बस $ http सेवा द्वारा बनाया गया वादा वापस करें।