Que sont les services dans AngularJS ? Introduction à l'utilisation d'AngularJS

Cet article présente principalement les services dans angularjs, ainsi que les détails des dépendances dans angulairejs. Jetons un coup d'œil à cet article maintenant

Description

Note du traducteur : J'ai vu un très bon article, si vous l'avez Si vous êtes intéressé, vous pouvez consultez : Promises et Javascript Asynchronous Programming, qui couvre les spécifications de Promises et les scénarios d'utilisation. Les avantages sont expliqués de manière très détaillée et je trouve personnellement cela simple et facile à comprendre.

Comme il est utilisé pour gérer la programmation asynchrone, il existe deux types principaux dans JS côté navigateur : setTimeout et les requêtes Ajax. L'utilisation des promesses est très similaire aux rappels de réussite et d'échec des requêtes Ajax.

Cette promesse/implémentation différée s'inspire du document de recommandation Q CommonJS Promise de Kris Kowal pour traiter les promesses comme une interface pour interagir avec des objets de résultat d'action à exécution asynchrone, dans le délai spécifié. Elle peut ou non être terminée dans le délai ( tels que timeout, erreur, interception, etc.).

Du point de vue de la gestion des erreurs, les API de délai (différé ) et de promesse (promesse ) sont destinées à la programmation asynchrone et essayer, attraper et lancer fonctionnent à peu près de la même manière. L'effet de

// 为了演示的目的,此处我们假设 `$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);
});

introduisant cette complexité supplémentaire peut initialement ne pas être évident. . Les avantages peuvent être constatés lorsque vous faites des promesses avec des API de promesse et différées, veuillez vous référer à : https://github.com/kriskowal/uncommonjs/blob/master/promises/specification.md

De plus, l'API de promesse permet à ces dans la méthode de rappel traditionnelle (CPS) est une combinaison difficile à mettre en œuvre. Veuillez consulter la
Documentation Q pour plus d'informations, notamment la section sur la fusion série et parallèle.

API différée | API différée

Une nouvelle instance différée peut être construite en appelant $q.defer().

L'objet différé permet d'associer l'instance Promise à l'API qui marque l'état de la tâche (exécution réussie ou non).

Méthodes d'objets différés

• resolve(value) ——Transmettez la valeur pour résoudre la promesse dérivée. Si la valeur est un objet de rejet (rejet) construit via $q.reject, la promesse sera rejetée.

• rejeter (raison) ——Rejeter la promesse dérivée et fournir la raison. Cela équivaut à passer l'objet de rejet (rejet) construit via $q.reject comme paramètre à résoudre.

• notify(value) - Fournit des mises à jour de statut pendant l'exécution de la promesse. Cela peut être appelé plusieurs fois avant que la promesse ne soit résolue ou rejetée.

Propriétés de l'objet différé

promesse – {Promesse} —— Promesse associée à l'objet différé.

Interface Promise | API Promise

Lorsqu'une instance différée est créée, un nouvel objet de promesse est créé et la référence peut être obtenue via

deferred.promise . Le but de l'objet de promesse est de permettre à la partie intéressée d'obtenir ses résultats d'exécution lorsque la tâche différée est terminée.

Méthodes d'objet de promesse

• then(successCallback, errorCallback, notifyCallback) - Peu importe si la promesse est traitée ou rejetée, une fois le résultat disponible, alors La fonction de rappel succès/erreur sera appelée de manière asynchrone dès que le résultat sera disponible. La fonction de rappel est appelée en passant un seul argument : le résultat ou le motif du rejet. De plus, le rappel de notification peut être appelé de zéro à plusieurs fois pour fournir une indication de la progression avant que la promesse ne soit résolue ou rejetée.

Cette méthode renvoie un nouvel objet de promesse, qui peut être résolu ou rejeté en fonction des valeurs de retour de successCallback et errorCallback. Il notifie également via la valeur de retour de la méthode notifyCallback. Une promesse ne peut pas être résolue ou rejetée à partir de la méthode notifyCallback.

• catch(errorCallback) - raccourci pour promise.then(null, errorCallback)

• enfin( callback) - vous permet d'observer si une promesse est exécutée ou rejetée, mais sans modifier la valeur finale. Cela peut être utilisé pour effectuer un travail de libération de ressources ou de nettoyage d'objets inutilisés, que la promesse soit rejetée ou résolue. Pour plus d'informations, veuillez vous référer à la spécification complète du document.

Parce que dans la version ES3 de JavaScript, c'est un mot-clé réservé et ne peut pas être utilisé comme nom d'attribut afin de s'adapter. vers IE8, vous devez utiliser promise['finally'](callback) pour appeler cette méthode.

Chaîne de promesses | Chaînage de promesses

Étant donné que l'appel de la méthode then d'une promesse renvoie une nouvelle instance de promesse dérivée, il est également facile de créer une chaîne de promesse :

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

我们可以创建任意长度的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);
}));

依赖关系 | 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);
});

• 参数: reason

• 类型: *

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

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

when(value)

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

• 参数: value

• 类型: *

• 描述: promise 的值

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!