AngularJS
Winkelversprechen mit $ q-Service

Verwenden Sie $ q.all, um mehrere Versprechen zu bearbeiten

Sie können die $q.all Funktion verwenden, um eine .then Methode .then , nachdem ein Array von Zusagen erfolgreich aufgelöst wurde, und die Daten .then , mit denen sie aufgelöst wurden.

Beispiel:

JS:

 $scope.data = []

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

Der obige Code läuft $http.get 2mal für Daten in lokalen json - Dateien, wenn beide get Methode vollständig sie ihre zugehörigen Versprechungen lösen, wenn alle Versprechungen in der Anordnung gelöst werden, die .then beginnt Methode mit beiden Versprechen Daten innerhalb der responses Array-Argument.

Die Daten werden dann zugeordnet, sodass sie auf der Vorlage angezeigt werden können, und wir können sie anzeigen

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"
}]

Verwenden des $ q-Konstruktors zum Erstellen von Versprechen

Die $q Konstruktorfunktion wird verwendet, um Zusagen aus asynchronen APIs zu erstellen, die Rückrufe verwenden, um Ergebnisse zurückzugeben.

$ q (Funktion (auflösen, ablehnen) {...})

Die Konstruktorfunktion empfängt eine Funktion, die mit zwei Argumenten aufgerufen wird: resolve und reject Dies sind Funktionen, mit denen das Versprechen entweder aufgelöst oder abgelehnt wird.

Beispiel 1:

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

Im obigen Beispiel wird ein Versprechen aus der WindowTimers.setTimeout-API erstellt . Das AngularJS-Framework bietet eine ausführlichere Version dieser Funktion. Informationen zur Verwendung finden Sie in der AngularJS $ Timeout Service API-Referenz .

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

Der obige Code, der eine versprochene Divisionsfunktion zeigt, gibt ein Versprechen mit dem Ergebnis zurück oder weist einen Grund zurück, wenn die Berechnung nicht möglich ist.

Sie können dann anrufen und .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.
})

Verschieben von Operationen mit $ q.defer

Wir können $q , um Operationen in die Zukunft zu verschieben, während wir derzeit ein ausstehendes Versprechungsobjekt haben. Mit $q.defer erstellen wir ein Versprechen, das entweder gelöst oder in der Zukunft abgelehnt wird.

Diese Methode ist nicht gleichbedeutend mit der Verwendung des $q Konstruktors, da mit $q.defer eine vorhandene Routine versprochen wird, die möglicherweise ein Versprechen zurückgibt (oder jemals zurückgegeben hat).

Beispiel:

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. .then Sie sicher, dass Sie immer das Objekt deferred.promise , oder riskieren Sie einen Fehler, wenn Sie .then

2. .then Sie sicher, dass Sie Ihr zurückgestelltes Objekt immer auflösen oder ablehnen, .then möglicherweise nicht ausgeführt, und Sie riskieren einen Speicherverlust

Verwenden von winkligen Versprechen mit dem $ q-Service

$q ist ein integrierter Dienst, der bei der Ausführung asynchroner Funktionen und der Verwendung ihrer Rückgabewerte (oder Ausnahme) hilft, wenn die Verarbeitung abgeschlossen ist.

$q ist in den $rootScope.Scope Modellbeobachtungsmechanismus integriert, was eine schnellere Ausbreitung der Auflösung oder Ablehnung in Ihren Modellen bedeutet und unnötige Browser-Neulackierungen vermeidet, die zu einer flimmernden Benutzeroberfläche führen.

In unserem Beispiel rufen wir unsere Factory getMyData , die ein Versprechenobjekt getMyData . Wenn das Objekt resolved , wird eine Zufallszahl zurückgegeben. Wenn es rejected , wird nach 2 Sekunden eine Ablehnung mit einer Fehlermeldung zurückgegeben.

In der Winkelfabrik

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

Versprechen auf Abruf verwenden

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

Um Versprechungen zu verwenden, fügen Sie $q als Abhängigkeit hinzu. Hier haben wir $q in die getMyData Fabrik eingespritzt.

var defer = $q.defer();

Eine neue verzögerte Instanz wird erstellt, indem $q.defer()

Ein aufgeschobenes Objekt ist einfach ein Objekt, das ein Versprechen sowie die zugehörigen Methoden zur Lösung dieses Versprechens aufdeckt. Es ist so konstruiert , mit der $q.deferred() Funktion und macht drei Hauptmethoden: resolve() , reject() und notify() .

• resolve(value) - löst das abgeleitete Versprechen mit dem Wert auf.
• reject(reason) - lehnt das abgeleitete Versprechen mit dem Grund ab.
• notify(value) - informiert über den Status der Ausführung des Versprechens. Dies kann mehrmals aufgerufen werden, bevor das Versprechen entweder gelöst oder abgelehnt wird.

Eigenschaften

Auf das zugehörige Versprechungsobjekt wird über die Versprechenseigenschaft zugegriffen. promise - {Versprechen} - Versprechungsobjekt, das diesem zurückgestellten zugeordnet ist.

Eine neue Versprechungsinstanz wird erstellt, wenn eine verzögerte Instanz erstellt wird, die durch Aufrufen von deferred.promise abgerufen werden kann.

Der Zweck des promise besteht darin, interessierten Parteien nach Abschluss des Vorgangs den Zugriff auf das Ergebnis der zurückgestellten Aufgabe zu ermöglichen.

Versprechungsmethoden -

• then(successCallback, [errorCallback], [notifyCallback]) - Unabhängig davon, wann das Versprechen aufgelöst wurde oder abgelehnt wird, ruft einer der Erfolgs- oder Fehlerrückrufe asynchron auf, sobald das Ergebnis verfügbar ist. Die Callbacks werden mit einem einzigen Argument aufgerufen: dem Ergebnis oder dem Ablehnungsgrund. Zusätzlich kann der Benachrichtigungsrückruf null oder mehrmals aufgerufen werden, um eine Fortschrittsanzeige bereitzustellen, bevor das Versprechen gelöst oder abgelehnt wird.

• catch(errorCallback) - Abkürzung für promise.then (null, errorCallback)

• finally(callback, notifyCallback) - Ermöglicht Ihnen, die Erfüllung oder Ablehnung eines Versprechens zu beobachten, dies jedoch ohne Änderung des Endwerts.

Eine der wichtigsten Eigenschaften von Versprechen ist die Fähigkeit, sie miteinander zu verketten. Dadurch können die Daten durch die Kette fließen und in jedem Schritt manipuliert und mutiert werden. Dies wird am folgenden Beispiel demonstriert:

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

Einfaches Versprechen mit $ q.when () in ein Versprechen

Wenn Sie den Wert nur in ein Versprechen einpacken müssen, müssen Sie nicht die lange Syntax wie hier verwenden:

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

In diesem Fall können Sie einfach schreiben:

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

$ q.when und sein Alias ​​$ q.resolve

Schließt ein Objekt, das ein Wert oder ein (Drittanbieter) dann mögliches Versprechen ist, in ein $ q-Versprechen ein. Dies ist nützlich, wenn Sie es mit einem Objekt zu tun haben, das möglicherweise ein Versprechen ist oder nicht, oder wenn das Versprechen aus einer Quelle stammt, der nicht vertraut werden kann.

- AngularJS $ q Service-API-Referenz - $ q.when

Mit der Veröffentlichung von AngularJS v1.4.1

Sie können auch eine ES6-konsistente Alias- resolve

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

Vermeiden Sie das $ q Deferred Anti-Pattern

Vermeiden Sie dieses Anti-Pattern

var myDeferred = $q.defer();

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

return myDeferred.promise;

Mit $q.defer kein Versprechen $q.defer da der $ http-Service bereits ein Versprechen zurückgibt.

//INSTEAD
return $http(config);

Geben Sie einfach das vom $ http-Service erstellte Versprechen zurück.