浅谈Angular的 $http, $q, defer, promise

最新推荐文章于 2024-04-13 15:17:28 发布

qtwwyl

最新推荐文章于 2024-04-13 15:17:28 发布

阅读量2.9k

点赞数 1

分类专栏： angularjs 文章标签： angular

angularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

$http

$http 服务：只是简单封装了浏览器原生的XMLHttpRequest对象，接收一个参数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容，这个函数返回一个promise对象，具有success和error方法。

$http服务的使用场景：

var promise = $http({
method:"post",        　　// 可以是get,post,put, delete,head,jsonp;常使用的是get,post
url:"./data.json", 　　   //请求路径
params:{'name':'lisa'},  //传递参数，字符串map或对象，转化成？name=lisa形式跟在请求路径后面
data:blob, 　　　　　　　　//通常在发送post请求时使用，发送二进制数据，用blob对象。
}).success(function(data){
//响应成功操作
}).error(function(data){
//响应失败（响应以错误状态返回）操作
})

then()函数：可以使用then()函数来处理$http服务的回调，then()函数接受两个可选的函数作为参数，表示success或error状态时的处理，也可以使用success和error回调代替：　

then(successFn, errFn, notifyFn),无论promise成功还是失败了，当结果可用之后， then都会立刻异步调用successFn或者errFn。这个方法始终用一个参数来调用回调函数：结果，或者是拒绝的理由。
在promise被执行或者拒绝之前， notifyFn回调可能会被调用0到多次，以提供过程状态的提示

promise.then(function(resp){
//响应成功时调用，resp是一个响应对象
}, function(resp) {
// 响应失败时调用，resp带有错误信息
});

then()函数接收的resp（响应对象）包含5个属性：　

data（字符串或对象）：响应体
status:相应http的状态码,如200
headers(函数)：头信息的getter函数，可以接受一个参数，用来获取对应名字的值
config(对象)：生成原始请求的完整设置对象
statusText:相应的http状态文本，如”ok”

或者使用success/error方法，使用

//成功处理
promise.success(function(data, status, headers, config){
// 处理成功的响应
});
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
});

$q

$q是Angular的一种内置服务，它可以使你异步地执行函数，并且当函数执行完成时它允许你使用函数的返回值（或异常）。

defer

defer的字面意思是延迟，$q.defer() 可以创建一个deferred实例（延迟对象实例）。

deferred 实例旨在暴露派生的Promise 实例，以及被用来作为成功完成或未成功完成的信号API，以及当前任务的状态。这听起来好复杂的样子，总结$q, defer, promise三者之间的关系如下所示。

var deferred = $q.defer();  //通过$q服务注册一个延迟对象 deferred
var promise = deferred.promise;  //通过deferred延迟对象，可以得到一个承诺promise，而promise会返回当前任务的完成结果

defer的方法：

1. deferred.resolve(value)  成功解决(resolve)了其派生的promise。参数value将来会被用作promise.then(successCallback(value){...}, errorCallback(reason){...}, notifyCallback(notify){...})中successCallback函数的参数。

2. deferred.reject(reason)  未成功解决其派生的promise。参数reason被用来说明未成功的原因。此时deferred实例的promise对象将会捕获一个任务未成功执行的错误，promise.catch(errorCallback(reason){...})。补充一点，promise.catch(errorCallback)实际上就是promise.then(null, errorCallback)的简写。

3. notify(value)  更新promise的执行状态(翻译的不好，原话是provides updates on the status of the promise's execution)

defer的小例子：

function asyncGreet(name) {
  var deferred = $q.defer();  //通过$q.defer()创建一个deferred延迟对象，在创建一个deferred实例时，也会创建出来一个派生的promise对象，使用deferred.promise就可以检索到派生的promise。

  deferred.notify('About to greet ' + name + '.');  //延迟对象的notify方法。

  if (okToGreet(name)) {
    deferred.resolve('Hello, ' + name + '!');  //任务被成功执行
  } else {
    deferred.reject('Greeting ' + name + ' is not allowed.');  //任务未被成功执行
  }

  return deferred.promise;  //返回deferred实例的promise对象
}

function okToGreet(name) {
  //只是mock数据，实际情况将根据相关业务实现代码
  if(name == 'Superman') return true;  
  else return false;
}

var promise = asyncGreet('Superman');  //获得promise对象
//promise对象的then函数会获得当前任务也就是当前deferred延迟实例的执行状态。它的三个回调函数分别会在resolve(), reject() 和notify()时被执行
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);
});

promise

当创建一个deferred实例时，promise实例也会被创建。通过deferred.promise就可以检索到deferred派生的promise。

promise的目的是允许interested parties 访问deferred任务完成的结果。

按照CommonJS的约定，promise是一个与对象交互的接口，表示一个动作(action)的结果是异步的，而且在任何给定的时间点上可能或不可能完成。（这句话好绕口，我的理解是promise相当于一个承诺，承诺你这个任务在给定的时间点上可能会完成，也可能完成不了。如果完成了那就相当于resolve, 如果未完成就相当于reject。不知道这样理解对不对？）

promise 的方法:

1. then(successCallback, errorCallback, nitifyCallback) 根据promise被resolve/reject，或将要被resolve/reject,调用successCallback/errorCallback。

2. catch(errorCallback)  then(null, errorCallback)的缩写。

3. finally(callback, notifyCallback)

补充说明：

promise.then()会返回一个新的衍生promise，形成promise链。例如：

promiseB = promiseA.then(function(result) {
  return result + 1;
});

// promiseB will be resolved immediately after promiseA is resolved and its value
// will be the result of promiseA incremented by 1