Heim > Web-Frontend > js-Tutorial > Hauptteil

Was sind Dienste in AngularJS? Einführung in die Verwendung von AngularJS

寻∝梦
Freigeben: 2018-09-08 15:17:57
Original
1314 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die Dienste in AngularJS sowie die Details der Abhängigkeiten in AngularJS vorgestellt. Werfen wir jetzt einen Blick auf diesen Artikel

Beschreibung

Anmerkung des Übersetzers: Ich habe einen sehr guten Artikel gesehen, wenn Sie interessiert sind, können Sie dies tun Schauen Sie sich „Promises und Javascript Asynchronous Programming“ an, in dem die Spezifikationen und Verwendungsszenarien von Promises behandelt werden. Die Vorteile werden sehr ausführlich erklärt und ich persönlich finde es einfach und leicht zu verstehen.

Da es zur Verarbeitung asynchroner Programmierung verwendet wird, gibt es in browserseitigem JS zwei Haupttypen: setTimeout- und Ajax-Anfragen. Die Verwendung von Versprechen ist den Erfolgs- und Fehlerrückrufen von Ajax-Anfragen sehr ähnlich.

Diese versprochene/aufgeschobene Implementierung ist von Kris Kowals Q CommonJS Promise-Empfehlungsdokument inspiriert und behandelt Versprechen als Schnittstelle für die Interaktion mit asynchron ausgeführten Aktionsergebnisobjekten in der angegebenen Zeit. Sie kann innerhalb der angegebenen Zeit abgeschlossen werden oder auch nicht ( (z. B. Zeitüberschreitung, Fehler, Abfangen usw.).

Aus Sicht der Fehlerbehandlung sind die APIs „delay“ (deferred ) und „Promise“ (promise ) für die asynchrone Programmierung und vorgesehen try, catch und throw bewirken im Großen und Ganzen das Gleiche

// 为了演示的目的,此处我们假设 `$q`, `scope` 以及 `okToGreet` 引用 在当前执行环境中可用
// (比如他们已经被注入,或者被当做参数传进来了).
 
function asyncGreet(name) {
  var deferred = $q.defer();
 
  setTimeout(function() {
    // 因为此function 在未来的事件循环中异步执行,
    // 我们需要把代码包装到到一个 $apply 调用中,以便正确的观察到 model 的改变
    scope.$apply(function() {
      deferred.notify('即将问候 ' + name + '.');
 
      if (okToGreet(name)) {
        deferred.resolve('你好, ' + name + '!');
      } else {
        deferred.reject('拒绝问候 ' + name + ' .');
      }
    });
  }, 1000);
 
  return deferred.promise;
}
 
var promise = asyncGreet('小漠漠');
promise.then(function(greeting) {
  alert('成功: ' + greeting);
}, function(reason) {
  alert('失败鸟: ' + reason);
}, function(update) {
  alert('收到通知: ' + update);
});
Nach dem Login kopieren
Der Effekt der Einführung dieser zusätzlichen Komplexität ist möglicherweise zunächst nicht offensichtlich . Die Vorteile lassen sich erkennen, wenn man Versprechen mit Promise- und Deferred-APIs macht, siehe: https://github.com/kriskowal/uncommonjs/blob/master/promises/pecification.md

Darüber hinaus ermöglicht die Promise-API diese Bei herkömmlichen Callbacks (CPS) ist die Kombination eine schwer zu erreichende Methode. Weitere Informationen finden Sie in der
Q-Dokumentation, insbesondere im Abschnitt zum Zusammenführen von seriell und parallel.

Deferred API |. Deferred API

Eine neue verzögerte Instanz kann durch Aufruf von $q.defer() erstellt werden.

Das verzögerte Objekt wird verwendet, um die Promise-Instanz mit der API zu verknüpfen, die den Aufgabenstatus markiert (erfolgreiche oder fehlgeschlagene Ausführung).

Methoden verzögerter Objekte

  • resolve(value) ——Wert übergeben, um das abgeleitete Versprechen aufzulösen. Wenn value ein über $q.reject erstelltes Ablehnungsobjekt (rejection) ist, wird das Versprechen abgelehnt.

  • ablehnen (Grund) – Lehnen Sie das abgeleitete Versprechen ab und geben Sie den Grund an. Dies entspricht der Übergabe des über $q.reject erstellten Ablehnungsobjekts (rejection) als aufzulösenden Parameter.

  • notify(value) – Stellt Statusaktualisierungen während der Versprechensausführung bereit. Dies kann mehrmals aufgerufen werden, bevor das Versprechen gelöst oder abgelehnt wird.

Eigenschaften verzögerter Objekte

Versprechen – {Versprechen} —— Versprechen im Zusammenhang mit verzögerten Objekten.

Promise-Schnittstelle |. Promise-API

Wenn eine verzögerte Instanz erstellt wird, wird ein neues Promise-Objekt erstellt und die Referenz kann über

deferred.promise abgerufen werden . Der Zweck des Versprechensobjekts besteht darin, dem interessierten Teil zu ermöglichen, seine Ausführungsergebnisse zu erhalten, wenn die verzögerte Aufgabe abgeschlossen ist.

Methoden des Promise-Objekts

  • then(successCallback, errorCallback, notifyCallback) – Egal ob das Promise verarbeitet oder abgelehnt wird, sobald das Ergebnis verfügbar ist, dann wird die Erfolgs-/Fehler-Callback-Funktion asynchron aufgerufen, sobald das Ergebnis verfügbar ist. Die Callback-Funktion wird aufgerufen und übergibt ein einzelnes Argument: das Ergebnis oder den Grund für die Ablehnung. Darüber hinaus kann der Notify-Rückruf null oder mehrmals aufgerufen werden, um einen Hinweis auf den Fortschritt zu geben, bevor das Versprechen gelöst oder abgelehnt wird.

Diese Methode gibt ein neues Promise-Objekt zurück, das basierend auf den Rückgabewerten von successCallback und errorCallback aufgelöst oder abgelehnt werden kann. Es benachrichtigt auch über den Rückgabewert der notifyCallback-Methode. Ein Versprechen kann von der notifyCallback-Methode nicht aufgelöst oder abgelehnt werden.


  • catch(errorCallback) – Abkürzung für Promise.then(null, errorCallback)

  • schließlich( Rückruf) – ermöglicht Ihnen zu beobachten, ob ein Versprechen ausgeführt oder abgelehnt wird, ohne jedoch den Endwert zu ändern. Dies kann verwendet werden, um Ressourcen freizugeben oder ungenutzte Objekte zu bereinigen, unabhängig davon, ob das Versprechen abgelehnt oder gelöst wird. Weitere Informationen finden Sie in der vollständigen Dokumentspezifikation.

Denn in der ES3-Version ist JavaScript schließlich ein reserviertes Wortschlüsselwort und kann nicht als Attributname verwendet werden Für IE8 müssen Sie Promise['finally'](callback) verwenden, um diese Methode aufzurufen.


Versprechenskette |. Versprechen verketten

Da der Aufruf der then-Methode eines Versprechens eine neue abgeleitete Versprechensinstanz zurückgibt, ist es auch einfach, eine Versprechenskette aufzubauen:


promiseB = promiseA.then(function(result) {
  return result + 1;
});
 
// promiseB 将会在处理完 promiseA 之后立刻被处理,
// 并且其  value值是promiseA的结果增加1
Nach dem Login kopieren

我们可以创建任意长度的promise链;因为一个promise可以被另一个promises处理(进一步推迟解决完成时间),所以在promise链上的任意一点进行 暂停/推迟解决 都是可行的。 这使得实现功能强大的APIs 成为现实,例如  $http 的响应拦截器。

Kris Kowal's Q 与 $q 之间的区别

主要区别有两点:

  • Angular中的$q 集成了 ng.$rootScope.Scope  Scope模型观察机制,这意味着对models 的解决或拒绝速度将会更快,避免不必要的浏览器重绘(会导致UI闪烁)。

  • Q 比 $q拥有更多的功能特性,但带来的是代码字节数的增加。 $q 很轻量级,但包含了一般异步任务所需的所有重要功能。

     测试

it('should simulate promise', inject(function($q, $rootScope) {
  var deferred = $q.defer();
  var promise = deferred.promise;
  var resolvedValue;
 
  promise.then(function(value) { resolvedValue = value; });
  expect(resolvedValue).toBeUndefined();
 
  // 模拟 promise 的 resolving
  deferred.resolve(123);
  // 注意 'then' function 不是同步调用的.
  // 因为我们想要  promise API 一直是异步的(async),
  // 不管是在同步调用还是异步调用中都是如此.
  expect(resolvedValue).toBeUndefined();
 
  // 使用 $apply()将 promise resolution 传递到 'then' functions .
  $rootScope.$apply();
  expect(resolvedValue).toEqual(123);
}));
Nach dem Login kopieren

依赖关系 | Dependencies

$rootScope 

方法 | Methods

all(promises)

结合多个promises为单个promise,在所有输入的promise都处理之后,组合之后的promise才会处理完成。

  • 参数: promises

  • 类型: Array./Object.

  • 描述: promises的数组或者引用

  • 返回: Promise 返回单个的 promise,将与一个数组解决/散列值, 每个值对应于在相同的索引/关键的承诺 承诺 /散列数组。 如果任何承诺解决排斥,这产生的承诺将被拒绝 拒绝相同的值。(想看更多就到PHP中文网AngularJS开发手册中学习)

defer()

创建一个 递延 对象代表一个将来完成任务。

  • 返回  Deferred 返回一个新实例的Deferred。

reject(reason)

创建一个指定拒绝原因的promise. 此api应该用于在一个promises链中进行拒绝。 如果你正在处理promise 链中的最后一个promise,你不需要担心。

把  deferreds/promises 与我们熟悉的的 try/catch/throw行为进行对比,可以认为 reject 相当于 JavaScript 中的throw 关键字。 这也意味着如果你通过一个 promise 的 error回调,  “catch”了一个错误 ,你想要指明当前的承诺已经执行出错了,就必须重新抛出一个“附带了错误信息,拒绝通过的reject” 。

promiseB = promiseA.then(function(result) {
  // success: 此处可以执行某些操作,然后直接使用原有的result,
  // 或者对result进行操作,来处理接下来的promiseB
  return result;
}, function(reason) {
  // error: handle the error if possible and
  //        resolve promiseB with newPromiseOrValue,
  //        否则转向拒绝 promiseB 的分支
  if (canHandle(reason)) {
   // 处理错误和恢复
   return newPromiseOrValue;
  }
  return $q.reject(reason);
});
Nach dem Login kopieren
  • 参数: reason

  • 类型: *

  • 描述: Constant, message, exception 或代表拒绝原因的 object。

  • 返回: Promise    返回一个promise ,已经因为 reason 而被拒绝了 。

when(value)

将一个对象(可能是value 或  [第三方]then-able promise) 包装为一个 $q promise。 这在你不确定所处理的对象是否是一个promise 时是很有用的,有可能该对象来自于一个不被信任的源头。

  • 参数: value

  • 类型: *

  • 描述: promise 的值

  • 返回 Promise    根据传入的值/或promise 返回一个包装后的 promise

本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWas sind Dienste in AngularJS? Einführung in die Verwendung von AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage