تفسير Promise في AngularJS - خدمة $q

دعونا نتحدث أولاً عما هوPromise وما هو$q. Promise هو نموذج معالجة غير متسلسل، يوجد له عدة طرق للتنفيذ، مثل Q من Kris Kwal و Deferred من JQuery.

ما هوPromise

كل من درس Ajax يستطيع فهم معاناة الدوال التراجعية، يمكن تحديد الكود المتسلسل بسهولة، ولكن الكود غير المتسلسل التراجعي يمكن أن يضع المطورين في مستنقع، لا يمكن تتبعه، مثل:

funA(arg1, arg2, function(){
  funcB(arg1, arg2, function(){
    funcC(arg1, arg2, function(){
       xxxx....
    })
  })  
})

التنسيق المدمج بالفعل صعب الفهم، بالإضافة إلى عدم معرفة متى يتم تنفيذ الدالة التراجعية، هذا يعني زيادة في الصعوبة.

ولكن مع وجودPromise هذا المعيار، يمكنه مساعدة المطورين على كتابة كود متسلسل باستخدام طريقة غير متسلسلة، مثل استخدام هذا الأسلوب في AngularJS:

deferABC.resolve(xxx)
.then(funcSuccess(){}, funcError(){}, funcNotify(){});

عندما يتم تنفيذ العنصر في resolve بنجاح، يتم إطلاق funcSuccess، وإذا فشل يتم إطلاق funcError. يشبه هذا

deferABC.resolve(function(){
  Sunccess:funcSuccess,
  error:funcError,
  notify:funcNotify
})

بالكلام البسيط، Promise هو تعريف مسبق للنتيجة غير المؤكدة، إذا نجح، فإنه سيتم xxxx؛ إذا فشل، فإنه سيتم xxxx، مثل إعطاء بعض الوعود مسبقًا.

على سبيل المثال، كان الصغير غالبًا ما يكون كسولًا أثناء الدراسة، وكان يعتمد دائمًا على شريكته للحصول على الطعام، وكان يتفق معها مسبقًا، إذا كان هناك خضار بالبيض، فاشترِ هذا الطعام، وإلا اشترِ البيض المتبل بالخضار؛ يجب أن تذكر دائمًا إحضار الباوندات مهما كان.

الصغير يطلب من شريكته إحضار الطعام
.then(الخضار، البيض المتبل بالخضار)
.finally(مع الباوندات)

خدمة $q

خدمة q هي إجراء AngularJS الخاص بـPromise، وهو أخف من Kris Kwal's Q بشكل كبير.
سأقوم بتقديم بعض الطرق الشائعة لـ $q:

defer() ينشئ object deferred يمكنه تنفيذ بعض الطرق المعتادة مثل resolve، reject، notify وما إلى ذلك
all() تأخذ مجموعة من Promise، تنفذها بشكل جماعي، وتعيد object promise.
when() تأخذ متغير غير معروف، إذا كان يتبع معايير Promise، فإنها تعود بـpromise object.

في Promise، تم تعريف ثلاثة أنواع من الحالات: حالة الإنتظار، حالة الإتمام، وحالة الرفض.

هناك بعض القواعد المتعلقة بالحالة:

1 لا يمكن رجوع تغيير الحالة
2 يمكن أن تصبح حالة الإنتظار إتمام أو رفض

طريقة defer()

في $q، يمكنك استخدام الطريقة resolve لتغيير الحالة إلى إتمام؛ باستخدام الطريقة reject لتغيير الحالة إلى رفض.

نرى الاستخدام البسيط لـ $q:

<html ng-app="myApp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
  <div ng-controller="myctrl">
    {{test}}
  </div>
  <script type="text/javascript">
     var myAppModule = angular.module("myApp",[]);
     myAppModule.controller("myctrl",["$scope","$q",function($scope, $ q ){
      $scope.test = 1;// هذه مجرد اختبار لتأكيد عمل angularjs، وليس لها أي دور آخر
      var defer1 = $q.defer();
      var promise1 = defer1.promise;
      promise1
      .then(function(value){
        console.log("في promise1 ---- success");
        console.log(value);
      },function(value){
        console.log("في promise1 ---- error");
        console.log(value);
      },function(value){
        console.log("في promise1 ---- notify");
        console.log(value);
      })
      .catch(function(e){
        console.log("في promise1 ---- catch");
        console.log(e);
      })
      .finally(function(value){
        console.log('في promise1 ---- finally');
        console.log(value);
      });
      defer1.resolve("hello");
      // defer1.reject("sorry,reject");
     });
  </script>
</body>
</html>

يستخدم defer() لإنشاء ملف deferred، وdefer.promise لتحويل ملف promise لتحديد طريقة then. تحتوي then على ثلاثة معلمات، وهي إعادة التفعيل الناجح، وإعادة التفعيل الفاشل، وإعادة التفعيل للتغيير في الحالة.

المتغيرات أو الدوال التي يتم إدخالها في resolve، أو النتائج التي تعود منها، سيتم استخدامها كمعلمات الأولى من طريقة then. ستقوم طريقة then بتقديم ملف promise، لذا يمكن كتابتها

xxxx
.then(a,b,c)
.then(a,b,c)
.then(a,b,c)
.catch()
.finally()

استمر في الحديث عن الكود السابق، then...catch...finally يمكن تصورها كtry...catch...finally في java.

طريقة all()

يمكن لهذه الطريقة all() دمج مجموعة من primise في مجموعة واحدة. عند تنفيذ جميع promis بنجاح، سيتم تنفيذ الدالة المرتبطة بعد ذلك. هيكل الدالة، هي نتائج تنفيذ كل promise.

يمكن استخدام هذه الطريقة عند تنفيذ بعض الطرق بشكل جماعي.

   var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      var funcB = function(){
        console.log("funcB");
        return "hello,funB";
      }
      $q.all([funcA(),funcB()])
      .then(function(result){
        console.log(result);
      });

نتيجة التنفيذ:

funcA
funcB
مجموعة Array [ "hello,funA", "hello,funB" ]

طريقة when()

يمكن إدخال معامل في طريقة when، هذا المعامل قد يكون قيمة، أو قد يكون عنصرًا خارجيًا يتبع معايير promise.　　　　　

   var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      $q.when(funcA())
      .then(function(result){
        console.log(result);
      });

يمكن استخدام هذا الطريقة عند عدم تحديد المعامل المت传入.

hello,funA

هذا هو الشرح الشامل للمعلومات المتعلقة بـ Promise في AngularJS - خدمة $q، سيتم إكمال المعلومات ذات الصلة لاحقًا، شكرًا للجميع على دعم هذا الموقع!

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات للجميع، تم جمع المحتويات من قبل المستخدمين على الإنترنت بشكل تلقائي، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت محتويات مشكوك فيها في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الدليل، وإذا تم التحقق من ذلك، سيتم حذف المحتويات المشكوك فيها فورًا.

دليل الأساسيات

أعجبك ذلك