For 循环中的 Javascript 承诺链答案

【问题标题】：Javascript Chain of promises in For LoopFor 循环中的 Javascript 承诺链
【发布时间】：2018-11-29 19:12:36
【问题描述】：

我正在使用 twilio 平台...并且我正在测试我的代码...但是我不明白当我尝试从 channelDescriptor 获取频道时会发生什么... 我有这个代码：

function processChannelPage(page)
            {
                var items = page.items;
                that.channels = that.channels || [];

                for (let c = 0, p = Promise.resolve(); c < items.length; c++) 
                {
                    p = p.then(function() {
                        let channelDescriptor = items[c];                        
                        console.log("SID ", channelDescriptor.sid);
                        
                         
                        getPreviousMessages(channelDescriptor, that)
                        .then(function() {
                            console.log("resuelto msg", channelDescriptor.sid);
                            return Promise.resolve();
                        }); 

                    });    
                }

                ..............
            }

            that.client.getUserChannelDescriptors().then(function (paginator) {
                processChannelPage(paginator);
            });

    function getPreviousMessages(channelDescriptor, chat) {
        return new Promise(resolve => { 
            console.log("p2.....step0.....", channelDescriptor.sid);     
            console.log("p2.....step1.....", channelDescriptor.sid);
            let promise = chat.getChannel(channelDescriptor.sid); 
            console.log(promise);       
            return promise.then(channel => {
                console.log("p2.....step2.....", channelDescriptor.sid); 
                return channel;
            });
        });
    }
 

    TwilioChat.prototype.getChannel = function (channel_sid) {
        console.log("I am in getChannel.....");
        for (var channel in this.channels) {
            if (this.channels[channel].sid == channel_sid) {
                return this.channels[channel].getChannel();
            }
        }
        return null;
    };

我知道 TwilioChat.prototype.getChannel 返回一个 Promise，然后我知道我需要像这样使用 THEN 来评估这个 Promise

chat.getChannel(channelDescriptor.sid).then

但我看到了这个结果：

SID  CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:147 p2.....step0..... CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:148 p2.....step1..... CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:388 I am in getChannel.....
twilio_helper.js:392 Promise {<pending>}
twilio_helper.js:72 SID  CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:147 p2.....step0..... CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:148 p2.....step1..... CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:388 I am in getChannel.....
twilio_helper.js:392 Promise {<pending>}
twilio_helper.js:150 p2.....step2..... CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:150 p2.....step2..... CH369ca3cc46d74886b031a52fd2e7dc29

我的问题是......为什么这个日志 twilio_helper.js:150 p2.....step2 我看到了我的承诺链之外。我需要看到这个结果：

SID  CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:147 p2.....step0..... CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:148 p2.....step1..... CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:388 I am in getChannel.....
twilio_helper.js:392 Promise {<pending>}
twilio_helper.js:150 p2.....step2..... CH09c567eeebab4dabb5fa8594a44d774e

twilio_helper.js:72 SID  CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:147 p2.....step0..... CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:148 p2.....step1..... CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:388 I am in getChannel.....
twilio_helper.js:392 Promise {<pending>}
twilio_helper.js:150 p2.....step2..... CH369ca3cc46d74886b031a52fd2e7dc29

第一个channelDescriptor....所有promise都执行了....下一个ChannelDescriptor...所有promise都执行了...换句话说，循环按每个channelDescriptor的顺序前进... 请我只需要 Promises... 而不是 Async/Await... 因为我需要这也适用于 IExplorer。你能帮我兑现这个承诺吗？非常感谢！

好的！！！！好的，我像这些修改一样更改我的代码....

TwilioChat.prototype.getChannel = function(channel_sid){
    console.log("I am in getChannel.....");
    for (var channel in this.channels) {
        if (this.channels[channel].sid == channel_sid) {
            return this.channels[channel].getChannel();
        }
    }
    reject("error");
};


function getPreviousMessages(channelDescriptor, chat) {
    return new Promise(resolve => { 
        console.log("p2.....step0.....", channelDescriptor.sid);     
        console.log("p2.....step1.....", channelDescriptor.sid);
        let promise = chat.getChannel(channelDescriptor.sid); 
        console.log(promise);       
        return promise.then(channel => {
            console.log("p2.....step2.....", channelDescriptor.sid); 
            resolve(channel); // I Resolve my New Promise
        });
    });
}

但我的测试总是这样：

我明白了....这段代码日志....

SID  CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:147 p2.....step0..... CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:148 p2.....step1..... CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:388 I am in getChannel.....
twilio_helper.js:392 Promise {<pending>}
twilio_helper.js:72 SID  CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:147 p2.....step0..... CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:148 p2.....step1..... CH369ca3cc46d74886b031a52fd2e7dc29
twilio_helper.js:388 I am in getChannel.....
twilio_helper.js:392 Promise {<pending>}
twilio_helper.js:150 p2.....step2..... CH09c567eeebab4dabb5fa8594a44d774e
twilio_helper.js:150 p2.....step2..... CH369ca3cc46d74886b031a52fd2e7dc29

p2.....Step2.....在我的循环之外......真的我不明白。

【问题讨论】：

我发现您的代码存在几个问题：p 范围仅在 for 循环中，因此您不能将其返回以链接其他工作。您也在使用promise constructor antipattern，但不解析new Promise（您从不调用 resolve）。应该返回承诺 (getChannel) 的函数永远不应返回 null。这里有太多的事情是错误的。你以前用过 Promise 吗？
我看到了这个示例......我正在尝试做类似的事情......stackoverflow.com/questions/40328932/…
你阅读了我所有的评论吗？不要使用反模式。先解决这个问题。
是的！我需要停止循环中的每个项目，换句话说，我需要进行顺序循环...但是在每次迭代中都需要一个承诺链... getChannel ... getMessages ...和其他...如果getChannel无法返回空值，我明白......我可以“输入”一个验证 if (promise) {} 那么这意味着它是一个有效的承诺......我试图理解使用 twilio 示例编程的承诺......我需要做一个 For 循环（每次迭代必须有一个承诺链......并且这个循环必须按顺序进行......一个接一个）。
好的...但是 TwilioChat.prototype.getChannel 返回 this.channels[channel].getChannel(); 这是一个承诺...因为我看到了这个结果Promise {} 如果我使用 .then( 这个结果超出了我的顺序...你明白吗...这是怎么回事？

标签： javascript es6-promise twilio-api ecmascript-2016 twilio-programmable-chat

【解决方案1】：

避免getPreviousMessages 中的Promise constructor antipattern，确保getChannel 始终返回一个promise，并且不要忘记return 来自then 中的then 回调中的promise。

function processChannelPage(page) {
    var items = page.items;
    that.channels = that.channels || [];

    for (let c = 0, p = Promise.resolve(); c < items.length; c++) {
        p = p.then(function() {
            let channelDescriptor = items[c];                        
            console.log("SID ", channelDescriptor.sid);

            return getPreviousMessages(channelDescriptor, that).then(function() {
//          ^^^^^^
                console.log("resuelto msg", channelDescriptor.sid);
            }); 
        });
    }
    …
    return p;
}

that.client.getUserChannelDescriptors().then(function (paginator) {
    return processChannelPage(paginator);
//  ^^^^^^
});

function getPreviousMessages(channelDescriptor, chat) {
    console.log("p2.....step0.....", channelDescriptor.sid);     
    console.log("p2.....step1.....", channelDescriptor.sid);
    let promise = chat.getChannel(channelDescriptor.sid); 
    console.log(promise);       
    return promise.then(channel => {
//  ^^^^^^
        console.log("p2.....step2.....", channelDescriptor.sid); 
        return channel;
    });
}

TwilioChat.prototype.getChannel = function (channel_sid) {
    console.log("I am in getChannel.....");
    for (var channel in this.channels) {
        if (this.channels[channel].sid == channel_sid) {
            return this.channels[channel].getChannel();
        }
    }
    return Promise.resolve(null);
//         ^^^^^^^^^^^^^^^^    ^
};

【讨论】：

非常感谢！谢谢