本文转自:点击打开链接
如果想使用 $http 或者其他异步操作, 那 $q 是必须要掌握的概念啦. Let's get started!
如何理解$q, deferred object ?
假设有一个家具厂,而它有一个VIP客户张先生。
有一天张先生需要一个豪华衣柜,于是,他打电话给家具厂说我需要一个衣柜,回头做好了给我送来,这个操作就叫$q.defer,也就是延期,因为这个衣柜不是现在要的,所以张先生这是在发起一个可延期的请求。
同时,家具厂给他留下了一个回执号,并对他说:我们做好了会给您送过去,放心吧。这叫做promise,也就是承诺。
这样,这个defer算是正式创建了,于是他把这件事记录在自己的日记上,并且同时记录了回执号,这叫做deferred,也就是已延期事件。
现在,张先生就不用再去想着这件事了,该做什么做什么,这就是“异步”的含义。
假设家具厂在一周后做完了这个衣柜,并如约送到了张先生家(包邮哦,亲),这就叫做deferred.resolve(衣柜),也就是“已解决”。而这时候张先生只要签收一下这个(衣柜)参数就行了,当然,这个“邮包”中也不一定只有衣柜,还可以包含别的东西,比如厂家宣传资料、产品名录等。整个过程中轻松愉快,谁也没等谁,没有浪费任何时间。
假设家具厂在评估后发现这个规格的衣柜我们做不了,那么它就需要deferred.reject(理由),也就是“拒绝”。拒绝没有时间限制,可以发生在给出承诺之后的任何时候,甚至可能发生在快做完的时候。而且拒绝时候的参数也不仅仅限于理由,还可以包含一个道歉信,违约金之类的,总之,你想给他什么就给他什么,如果你觉得不会惹恼客户,那么不给也没关系。
假设家具厂发现,自己正好有一个符合张先生要求的存货,它就可以用$q.when(现有衣柜)来把这个承诺给张先生,这件事就立即被解决了,皆大欢喜,张先生可不在乎你是从头做的还是现有的成品,只会惊叹于你们的效率之高。
假设这个家具厂对客户格外的细心,它还可能通过deferred.notify(进展情况)给张先生发送进展情况的“通知”。
这样,整个异步流程就圆满完成,无论成功或者失败,张先生都没有往里面投入任何额外的时间成本。
好,我们再扩展一下这个故事:
张先生这次需要做一个桌子,三把椅子,一张席梦思,但是他不希望今天收到个桌子,明天收到个椅子,后天又得签收一次席梦思,而是希望家具厂做好了之后一次性送过来,但是他下单的时候又是分别下单的,那么他就可以重新跟家具厂要一个包含上述三个承诺的新承诺,这就是$q.all(桌子承诺,椅子承诺,席梦思承诺),
这样,他就不用再关注以前的三个承诺了,直接等待这个新的承诺完成,到时候只要一次性签收了前面的这些承诺就行了。
如何创建 promise -1
$q 支持两种写法, 第一种是类似于ES6标准构造函数写法
$q(function resolver (resolve, reject) {})
注意:
+ ES6 写法并不支持 progress/notify 的回调函数
+ 在构造函数中抛异常也并不会显式的reject the promise
// var iWantResolve = false;
var iWantResolve = true;
function es6promise() {
return $q(function (resolve, reject) {
$timeout(function () {
if (iWantResolve) {
resolve("es6promise resolved");
} else {
reject("es6promise reject");
}
}, 1000)
})
}
promise 的方法
-
promise.then(successCb, errCb, notifyCb)
-
其中successCb 将在 promise resolve 后被调用, errCb 将在 promise reject 后被调
-
notifyCb 将在 deferred.notify 后被调用, 可以多次调用
-
promise.catch == promise.then(null, errCb), 用于处理之前没有被处理的 rejected promise
-
promise.finally 将最后被调用, 一般用于资源释放的清理操作
es6promise()
.then(function (data) {
console.log(data);
})
.catch(function (err) {
console.log(err);
});
// if(iWantResolve == true) output: es6promise resolved
// if(iWantResolve = false) output: es6promise reject
如何创建 promise -2
第二种是类似于 commonJS 的写法 $q.deferred()
function commonJsPromise() {
var deferred = $q.defer();
$timeout(function () {
deferred.notify("commonJS notify");
if (iWantResolve) {
deferred.resolve("commonJS resolved");
} else {
deferred.reject("commonJS reject");
}
}, 500);
return deferred.promise;
}
commonJsPromise()
.then(function /** success callback**/(data) {
console.log(data);
}, function /** error callback **/ (err) {
console.log(err);
}, function /** progress callback **/ (update) {
console.log(update);
});
// if(iWantResolve == true) output: commonJS notify commonJS resolved
// if(iWantResolve = false) output: commonJS notify commonJS reject
$q.all
-
$q.all([promise1, promise1])
接受一个包含若干个 promise 的数组, -
等所有的 promise resolve 后, 其本身 resolve 包含上述结果的数组 [data1, data2]
-
如果上述 promise 有一个 reject, 那么$q.all() 会把这个 rejected promise 作为其 rejected promise (只有一个哦)
-
progress/notify 的 callback 并没有用
$q.all([es6promise(), commonJsPromise()])
.then(function (dataArr) {
console.log("$q.all: ", dataArr);
}, function (err) {
console.log("$q.all: ", err)
}, function /** unnecessary **/ (update) {
console.log("$q.all", update);
});
// if(iWantResolve == true) output: $q.all: ["es6promise resolved", "commonJS resolved"]
// if(iWantResolve = false) output: $q.all: es6promise reject
$q.reject, $q.when, $q.resolve
-
$q.reject() 立即返回一个rejected 的 promise, 在链式调用的时候很有用
-
$q.resolve == $q.when(value, successCb, errorCb, progressCb)
-
value 可能是一个 then-able 的 obj(即可以是 $q.defer() 返回的, 也可以是其他库产生的), 也可能是任意数据, 但是 $q.when 最终都会返回一个 promise
-
$q.when 既可以写成上述的构造函数形式, 也可以写成 $q.when(value).then(fn, fn, fn) 的形式
$q.reject("instant reject")
.catch(function (err) {
console.log(err);
});
// output: instant reject
$q.when(commonJsPromise(),
function /** success callback **/(data) {
console.log("$q.when success callback function: " + data);
return "$q.when success callback return another value";
})
.then(function (data) {
console.log("$q.when then function:" + data);
});
// if(iWantResolve == true) output:
// $q.when success callback functionL: commonJS resolved
// $q.when then function:$q.when success callback return another value
// if(iWantResolve = false) output:
// $q.when err callback function: commonJS reject
// $q.when then function:undefined
$q.when("some value", function (data){
console.log(data);
})
// output: some value
promise chains 链式调用
任何在 successCb, errCb 中返回的非 $q.reject()对象, 都将成为一个 resolve 的 promise.
所以可以出现如下语法 promise.then().then().then()
$q.when("1")
.then(function (data) {
console.log(data);
return $q.reject(2);
})
.catch(function (err) {
console.log(err);
return 3;
})
.then(function (data) {
console.log(data);
})
// output: 1 2 3