首頁 > web前端 > js教程 > 主體

AngularJS中的服務是什麼? angularjs的使用方法介紹

寻∝梦
發布: 2018-09-08 15:17:57
原創
1306 人瀏覽過

本篇文章主要的介紹了關於angularjs中的服務,還有關於angularjs中的依賴關係詳情。現在就讓我們一起來看看這篇文章吧

描述

譯者註: 看到了一篇非常好的文章,如果你有興趣,可以查看: Promises與Javascript非同步程式設計, 裡面對Promises規範和使用情景,好處講的非常好透徹,個人覺得簡單易懂。

既然是用來處理非同步程式設計的,那麼在瀏覽器端的JS裡,主要是2種: setTimeout 和 Ajax 請求.  promise 的使用就很像Ajax請求的成功和失敗回呼。

此承諾/延遲(promise/deferred)實現的靈感來自於 Kris Kowal's Q CommonJS Promise建議文件將承諾(promise) 作為和異步執行操作(action)結果對象進行交互的接口,在指定的時間內可能完成也可能無法完成(如超時,錯誤,攔截等等)。

從錯誤處理的角度看,延遲(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 APIs 承諾時好處就看出來了,請參考:  https://github.com/kriskowal/uncommonjs/blob/master/promises/specification.md
另外promise api允許那些在傳統的回呼( CPS )方法中很難的實現的組合。更多資訊請查閱 Q文件 ,特別是 串列與並行的合併一節。

延遲介面 | Deferred API

透過呼叫  $q.defer() 可以建立一個新的 deffered 實例。
deffered 物件用來將 Promise 實例與 標記任務狀態(執行成功還是不成功)的 API 相關聯。

deffered 物件的方法

  • resolve(value) —傳入 value 解決派生的 promise。如果 value 是一個透過 $q.reject 建構的拒絕物件(rejection) , 該promise 將被拒絕。

  • reject(reason) ——拒絕派生的promise,並提供原因 。這相當於透過 $q.reject建構的拒絕物件(rejection)作為參數傳遞給 resolve。

  • notify(value)  -在 promise 執行的過程中提供狀態更新。這在 promise 被解決或拒絕之前可能會被多次呼叫。

deffered 物件的屬性

promise – {Promise} ——與延遲(deferred)相關聯的promise對象。

承諾 介面 | Promise API

當建立 deferred 實例時會建立一個新的 promise 物件,並且可以透過  deferred.promise 得到該引用。
promise 物件的目的是在 deferred 任務完成時,允許感興趣的部分取得其執行結果。

promise 物件的方法

  • then(successCallback, errorCallback, notifyCallback) ——不管promise 是被處理還是被拒絕, 一旦結果可用,then 就會盡快地非同步呼叫成功/錯誤回呼函數只要結果是可用的。呼叫回調函數時傳遞單一參數: 結果 或拒絕的理由。此外,notify 回呼可能被調用 0到多次,以提供 提供一個進度指示,之前承諾解決或拒絕。

           這個方法 傳回一個新的promise 物件, 根據 successCallback , errorCallback的回傳值來解決或拒絕 。它也透過 notifyCallback 方法的回傳值進行通知。 promise 不能從notifyCallback方法解決或拒絕 。

  • catch(errorCallback) —— promise.then(null, errorCallback) 的捷徑

  • finally(callback) ——讓你可以觀察到一個promise 是被執行還是被拒絕, 但這樣做不用修改最後的value值。這可以用來做一些釋放資源或清理無用物件的工作,不管promise 被拒絕還是解決。更多的資訊請參閱完整文件規格.

            因為在ES3版本的JavaScript中finally 是一個保留字關鍵字,不能作為屬性名稱,為了適配IE8,您需要使用promise['finally'](callback) 這種形式來呼叫該方法。

promise 鏈 | Chaining promises

因為呼叫一個 promise 的 then 方法傳回一個新的衍生 promise實例,所以建構promises鏈也是很容易的:

#
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使用手册中学习),有问题的可以在下方留言提问。

以上是AngularJS中的服務是什麼? angularjs的使用方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板