Angular $q 完全指南

转自：
xiaoyu2er：http://xiaoyu2er.github.io/20...

如果想使用 $http 或者其他异步操作,那 $q 是必须要掌握的概念啦. Let’s get started!

如何理解$q,deferred object ?

形象的讲解angular中的$q与promise

假设有一个家具厂，而它有一个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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!