怎么写promise的链式调用


比如我有一个A.func1()是异步的,它能返回一个对象x1,我还有一个B.func2()也是异步的,需要根据x1来执行,然后B.func2返回一个最终值值t,根据这个最终值t就进行一些提示性显示。请问这个要怎么写呢?
我自己写的代码是这样的


 A.func1().
    then(function(x1) {
        B.func2(x1).
            then(function(t) {
                //do something
            })
    })

但是感觉这样用不用then就一个效果啦……还是变回金字塔了

promise 异步 angularjs

Rasho 9 years, 8 months ago

promise会返回promise对象,这样才使得它可以使用优雅的链式调用。

嘻嘻大怪獸 answered 9 years, 8 months ago

直接在 then 里面返回一个 Promise 的对象,如下:


 javascript


 
A.func1() .then(function (x1) { return B.func2(x1); }) .then(function (t) { // do something });

针对你评论中说的问题,如果不使用第三方的 Promise 库的话,可以像下面这样使用:


 javascript


 var promise = new Promise(function (resolve, reject) {
    var firstValue;
    A.func1()
        .then(function (x1) {
            firstValue = x1;    // 临时保存
            return B.func2(x1);
        }, reject)
        .then(function (x2) {
            resolve({
                firstValue: firstValue,
                secondValue: x2
            });
        }, reject);
});

promise.then(function (result) {
    console.log(result);    // {"firstValue": "Hello", "secondValue": "World"}
});

使用第三方的 Promise 库可以简化这个过程。

为了看注册问题 answered 9 years, 8 months ago

针对评论里的补充的“promise连续调用过程中保存状态”,我想详细说几种策略

上策:去状态化

也就是调整你的逻辑,让A.func1,B.func2,和后面那个匿名函数(就叫func3吧)的调用过程不含状态,也就是让func3只依赖func2的输出,不依赖func1的输出;又或着让func2不依赖func1,用类似 Promise.all 来同时拿到func1和func2的结果丢给func3

中策:“全局”变量维护状态

优点:state可扩展state.x2 .x3 ...
问题:很长的调用链带复杂状态的话,很容易污染出bug,代码可维护性下降严重


 js


 
function yourLogic() { var state = {}; return A.func1() .then(function(x1) { state.x1 = x1; return B.func2(x1); }) .then(function(t) { //play with t & state.x1 return yourResult; }); }

bluebird 的bind方法可以绑定thisArg,可以用来保留状态,原理是一样的


 js


 
function yourLogic() { return A.func1() .bind({})//新建空对象用于保留状态 .then(function(x1) { this.x1 = x1; return B.func2(x1); }) .then(function(t) { //play with t & this.x1 return yourResult; }); }

中策:临时额外传递

优点:不带状态,如果调用链很长,这个额外状态被控制在两步之间,保持了较好的可维护性,不易出bug
缺点:如果长调用链的每步都有状态,会变得无比啰嗦


 js


 
function yourLogic() { return A.func1() .then(function(x1) { return B.func2(x1) .then(function(t) { return { t: t, x1: x1 } }); }) .then(function(state) { //play with state.t & state.x1 return yourResult; }); }

当然这里的内层then也可以自己封装一下优化掉


 js


 
function yourLogic() { return A.func1() .then(function(x1) { return keepState(B.func2(x1), { x1: x1 }, 't'); }) .then(function(state) { //play with state.t & state.x1 return yourResult; }); } function keepState(promise, state, key) { return promise.then(function(value) { state[key] = value; return state; }); }

下策:闭包维护状态

其实就是题主原来的写法,我觉得主要的问题就是题主说的又降级回到了原本的“callback hell”或者说回调金字塔的难堪之中了

优点是……it works


 js


 
function yourLogic() { return A.func1() .then(function(x1) { return B.func2(x1) .then(function(t) { //play with t & x1 return yourResult; }); }) }
魔法G莓莓 answered 9 years, 8 months ago

Your Answer