이 글에서는 angularjs의 서비스를 주로 소개하고, Anglejs의 종속성에 대한 세부 사항도 설명합니다. 지금 이 글을 살펴보자

Description

번역자 주: 아주 좋은 글을 보았는데, 관심이 있으시면 한번 확인해 보세요: Promises와 Promises에 직면한 Javascript 비동기 프로그래밍 사양, 사용법 시나리오와 혜택이 아주 잘 설명되어 있고 개인적으로 간단하고 이해하기 쉽다고 생각합니다.

비동기 프로그래밍을 처리하는 데 사용되므로 브라우저 측 JS에는 setTimeout 및 Ajax 요청이라는 두 가지 주요 유형이 있습니다. Promise의 사용은 Ajax 요청의 성공 및 실패 콜백과 매우 유사합니다.

이 약속/지연 구현은 Kris Kowal의 Q CommonJS 약속 권장 문서에서 영감을 받아 약속을 비동기 실행 작업 결과 개체와 상호 작용하기 위한 인터페이스로 사용하며 지정된 시간 내에 완료될 수 있습니다. 완료되지 않을 수 있습니다(예: 시간 초과, 오류, 차단 등).

오류 처리의 관점에서 비동기 프로그래밍용 지연(deferred ) 및 약속(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를 허용합니다. 콜백(CPS) 메서드는 구현하기 어렵습니다. 자세한 내용은
Q 문서, 특히 직렬 및 병렬 병합 섹션을 참조하세요.

Deferred API | Deferred API

$q.defer()를 호출하여 새로운 지연된 인스턴스를 생성할 수 있습니다.

지연된 개체는 작업 상태(실행 성공 또는 실패)를 표시하는 API와 Promise 인스턴스를 연결하는 데 사용됩니다.

Deffered 객체 메서드

resolve(value) ——파생된 Promise를 해결하려면 값을 전달합니다. value가 $q.reject를 통해 생성된 거부 개체(rejection)인 경우 Promise가 거부됩니다.
reject(reason) ——파생된 Promise를 거부하고 이유를 제공합니다. 이는 $q.reject를 통해 생성된 거부 객체(rejection)를 해결용 매개변수로 전달하는 것과 같습니다.
notify(value) - Promise 실행 중에 상태 업데이트를 제공합니다. 이는 Promise가 해결되거나 거부되기 전에 여러 번 호출될 수 있습니다.

defered 객체 속성

promise – {Promise} —— deferred와 관련된 promise 객체입니다.

Promise 인터페이스 | Promise API

연기된 인스턴스가 생성되면 새로운 Promise 객체가 생성되고

deferred.promise를 통해 참조를 얻을 수 있습니다. Promise 객체의 목적은 지연된 작업이 완료되면 관심 있는 부분이 실행 결과를 얻을 수 있도록 하는 것입니다.

Promise 객체 메소드

then(successCallback, errorCallback, informCallback) - Promise가 처리되거나 거부되었는지 여부에 관계없이 일단 결과를 사용할 수 있게 되면 결과가 나오는 즉시 성공/오류 콜백 함수를 비동기식으로 호출합니다. 의 사용 가능합니다. 콜백 함수는 단일 인수(결과 또는 거부 이유)를 전달하는 호출됩니다. 추가적으로, 알림 콜백은 Promise가 해결되거나 거부되기 전에 진행 상황을 표시하기 위해 0번 이상 호출될 수 있습니다.

이 메서드는 SuccessCallback 및 errorCallback의 반환 값에 따라 해결되거나 거부되는 새로운 Promise 개체를 반환합니다. 또한 informCallback 메소드의 반환 값을 통해 이를 알립니다. informCallback 메소드에서는 Promise를 확인하거나 거부할 수 없습니다.

catch(errorCallback) - promise.then(null, errorCallback)의 단축

finally(callback) - promise가 실행되는지 또는 거부되는지 관찰할 수 있지만 이 방법은 필요하지 않습니다. 마지막 값을 수정합니다. 이는 Promise가 거부되거나 해결되었는지 여부에 관계없이 리소스를 해제하거나 사용하지 않는 개체를 정리하는 작업을 수행하는 데 사용할 수 있습니다. 자세한 내용은 전체 문서 사양을 참조하세요.

ES3 버전의 JavaScript에서는 finally 가 예약어 키워드이므로 속성 이름으로 사용할 수 없으므로 IE8에 적응하려면 promise를 사용해야 합니다. ['finally'](callback )을 사용하여 이 메서드를 호출합니다.

약속 체인 | 약속 연결

약속의 then 메소드를 호출하면 새로운 파생된 약속 인스턴스가 반환되므로 약속 체인을 만드는 것도 쉽습니다.

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

로그인 후 복사