AngularJS 中的Promise --- $q服务详解

Parliamo prima di cosa è Promise e cosa è $q. Promise è un modello di gestione asincrona, ci sono molti modi per implementarlo, come il famoso Q di Kris Kwal e il Deferred di JQuery.

Cos'è Promise

Chi ha familiarità con Ajax può comprendere il dolore dei callback, il codice sincrono è facile da debuggare, ma il codice di callback asincrono può far cadere gli sviluppatori in una trappola, difficile da tracciare, ad esempio:

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

La struttura annidata è già difficile da comprendere, e poi non si sa quando verrà invocato il callback, è come se si mettesse sale su un already difficile da affrontare problema.

Ma con lo standard Promise, può aiutare gli sviluppatori a scrivere codice asincrono in modo sincrono, ad esempio, è possibile utilizzare questo metodo in AngularJS:

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

Quando l'oggetto all'interno di resolve viene eseguito con successo, viene attivato funcSuccess, se fallisce viene attivato funcError. È un po' come}}

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

Per essere più diretto, Promise è una predefinizione di esecuzione per risultati incerti, se ha successo, allora xxxx; se fallisce, allora xxxx, come se fossero stati dati alcuni impegni in anticipo.

Ad esempio, il piccolo era molto pigro quando studiava, di solito chiedeva al compagno di camera di portare la cena, e lo diceva in anticipo, se c'è il fermo e le uova lo comprerebbe, altrimenti comprerebbe le uova e i pomodori fritti; indipendentemente da ciò che si compra o non si compra, si deve ricordare di portare un pacchetto di sigarette.

Il piccolo chiede al compagno di camera di portare la cena
.then(fermo e uova, uova e pomodori fritti)
.finally(che include il pacchetto di sigarette)

Servizio $q

Il servizio q è un'implementazione di Promise auto-encapsulata in AngularJS, è più leggero rispetto a Kris Kwal's Q.
Prima di tutto, presentiamo alcuni metodi comuni di $q:

defer() crea un oggetto deferred, questo oggetto può eseguire alcuni metodi comuni, come resolve, reject, notify, ecc.
all() passing un array di Promise, esegue in modo batch, restituisce un oggetto promise
when() passing un parametro incerto, se soddisfa lo standard di Promise, restituisce un oggetto promise.

In Promise, sono definiti tre stati: stato in attesa, stato completato, stato rifiutato.

Ci sono alcune regole riguardanti lo stato:

1 Le variazioni dello stato sono irreversibili
2 Lo stato in attesa può diventare completato o rifiutato

Metodo defer()

In $q, è possibile utilizzare il metodo resolve per diventare nello stato completato; utilizzare il metodo reject per diventare nello stato rifiutato.

Vediamo l'uso semplice di $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; // Questo serve solo per testare se angularjs funziona correttamente, non ha altri scopi
      var defer1 = $q.defer();
      var promise1 = defer1.promise;
      promise1
      .then(function(value){
        console.log("in promise1 ---- success");
        console.log(value);
      }, function(value){
        console.log("in promise1 ---- error");
        console.log(value);
      }, function(value){
        console.log("in promise1 ---- notify");
        console.log(value);
      })
      .catch(function(e){
        console.log("in promise1 ---- catch");
        console.log(e);
      })
      .finally(function(value){
        console.log('in promise1 ---- finally');
        console.log(value);
      });
      defer1.resolve("hello");
      // defer1.reject("sorry, reject");
     });
  </script>
</body>
</html>

defer() viene utilizzato per creare un oggetto deferred, defer.promise viene utilizzato per restituire un oggetto promise per definire il metodo then. Il metodo then ha tre parametri, rispettivamente il callback di successo, il callback di fallimento e il callback di cambiamento di stato.

Le variabili o i risultati delle funzioni passati a resolve, verranno considerati come i parametri del primo metodo then. Il metodo then restituisce un oggetto promise, quindi può essere scritto come

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

Continua a parlare di quel codice sopra, then...catch...finally può essere pensato come try...catch...finally in Java.

Metodo all()

Questo metodo all() può combinare un array di promise in un unico array. Dopo che tutte le promise sono state eseguite con successo, verrà eseguito il callback successivo. I parametri del callback sono i risultati di ciascuna promise.

Puoi utilizzare questo metodo quando devi eseguire in blocco alcuni metodi.

   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);
      });

Risultato dell'esecuzione:

funcA
funcB
Array [ "hello,funA", "hello,funB" ]

Metodo when()

Il metodo when può accettare un parametro, che può essere un valore o un oggetto esterno che soddisfa lo standard promise.　　　　　

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

Puoi utilizzare questo metodo quando i parametri passati non sono determinati.

hello,funA

Di seguito è una descrizione dettagliata del servizio Promise --- $q in AngularJS, continueremo a fornire ulteriori informazioni correlate, grazie per il supporto della nostra community!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

教程基础