この記事では主にangularjsのサービスとangularjsの依存関係の詳細を紹介します。今すぐこの記事を見てみましょう

説明

翻訳者注: 非常に良い記事を拝見しました。興味があればチェックしてみてください: Promise と Promise に直面する Javascript 非同期プログラミング仕様、使用法シナリオやメリットが非常に丁寧に説明されており、個人的にはシンプルで理解しやすいと思います。

非同期プログラミングを処理するために使用されるため、ブラウザ側 JS には setTimeout リクエストと Ajax リクエストの 2 つの主なタイプがあります。Promise の使用は、Ajax リクエストの成功および失敗のコールバックと非常に似ています。

このプロミス/遅延実装は、Kris Kowal の Q CommonJS Promise 推奨ドキュメントに触発されており、非同期実行アクション結果オブジェクトと対話するためのインターフェイスとして Promise を使用します。これは、指定された時間内に完了する可能性がありますが、完了しない場合もあります (タイムアウト、エラー、傍受など)。

エラー処理の観点から見ると、非同期プログラミングの遅延 (deferred ) および Promise (promise ) API は、同期プログラミング try、catch、および throw と同様の機能を備えています。

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

ログイン後にコピー

この余分な複雑性の導入による効果は、最初は明らかではないかもしれません。この利点は、Promise および Deferred API を使用して Promise を行うときに確認できます。https://github.com/kriskowal/uncommonjs/blob/master/promises/specation.md を参照してください。さらに、Promise API では、従来の API での約束も可能になります。 callbacks (CPS) メソッドは実装が困難です。詳細については、特にシリアルとパラレルのマージに関するセクションについては、Q ドキュメント

を参照してください。
遅延 API | 遅延 API

$q.defer() を呼び出すことで、新しい遅延インスタンスを構築できます。

defered オブジェクトは、Promise インスタンスをタスクのステータス (実行の成功または失敗) をマークする API に関連付けるために使用されます。

Defered オブジェクトメソッド

——派生した Promise を解決するために値を渡します。 value が $q.reject を通じて構築された拒否オブジェクト (rejection) の場合、promise は拒否されます。
——派生したPromiseを拒否し、その理由を提供します。これは、$q.reject を通じて構築された拒否オブジェクト (rejection) を解決するパラメーターとして渡すことと同じです。
- Promise の実行中にステータスの更新を提供します。これは、Promise が解決または拒否される前に複数回呼び出される可能性があります。

defered オブジェクトのプロパティ

promise – {Promise}

—— deferred に関連付けられた Promise オブジェクト。

Promise インターフェイス | Promise API

遅延インスタンスが作成されると、新しい Promise オブジェクトが作成され、

deferred.promise

を通じて参照を取得できます。

Promise オブジェクトの目的は、遅延タスクが完了したときに、関心のある部分がその実行結果を取得できるようにすることです。
Promise オブジェクトのメソッド

then(successCallback, errorCallback, NoticeCallback) - Promise が処理されるか拒否されるかに関係なく、結果が利用可能になると、結果が得られ次第、成功/エラーコールバック関数を非同期で呼び出します。が利用可能です。コールバック関数は、単一の引数 (結果または拒否の理由) を渡して呼び出されます。さらに、通知コールバックはゼロ回以上呼び出され、Promise が解決または拒否される前に進行状況を示すことができます。

このメソッドは、successCallback と errorCallback の戻り値に基づいて解決または拒否される新しい Promise オブジェクトを返します。また、notifyCallback メソッドの戻り値を通じて通知します。プロミスは、notifyCallback メソッドから解決または拒否できません。

catch(errorCallback) - Promise.then(null, errorCallback) のショートカット

finally(callback) - Promise が実行されるか拒否されるかを観察できますが、この方法ではその必要はありません最後の値を変更します。これは、Promise が拒否されるか解決されるかに関係なく、リソースを解放したり、不要なオブジェクトをクリーンアップしたりするために使用できます。詳細については、完全なドキュメント仕様を参照してください

ES3 バージョンの JavaScript では、finally は予約語キーワードであり、プロパティ名として使用できないため、IE8 に適応させるには、promise を使用する必要があります。 ['finally'](callback) でこのメソッドを呼び出します。

Promise チェーン | Promise のチェーン

Promise の then メソッドを呼び出すと、新しい派生 Promise インスタンスが返されるため、Promise チェーンを構築するのも簡単です:

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

ログイン後にコピー