循环链顺序的Javascript承诺失败

Question

I try test javascript promise loop chain, but I fail, the promise loop not order I wish, my sample like this(1 set timeout, 3 promise function):

//timeout
timeout = function (fn, pkg) {
    var t = setTimeout(function () {
        fn(pkg);
        clearTimeout(t);
    }, 1000);
};
//Promise function
p01 = function (check) {
    return new Promise(function (RS, RJ) {
        var echo = 'Run P01';
        timeout(RS, echo);
    });
};
p02 = function (check) {
    return new Promise(function (RS, RJ) {
        var echo = 'Run P02';
        timeout(RS, echo);
    });
};
p03 = function (check) {
    return new Promise(function (RS, RJ) {
        var echo = 'Run P03';
        timeout(RS, echo);
    });
};

//do for loop test
for (var i = 0; i < 3; i++) {
    p01().then(function (echo) {
        console.log(echo);
        return p02();
    }).then(function (echo) {
        console.log(echo);
        return p03();
    }).then(function (echo) {
        console.log(echo);
        console.log('Done!');
    });
};

when loop done, log show me that:

(3)Run P01
(3)Run P02
Run P03
Done!
Run P03
Done!
Run P03
Done!

I don't know what wrong happen, how do I fix that to get like this:

Run P01
Run P02
Run P03
Done!
Run P01
Run P02
Run P03
Done!
Run P01
Run P02
Run P03
Done!

thank you for help!

Answer 1

Currently, each iteration in your for loop is running synchronously , one after another. The Promise chain gets initialized, but you aren't waiting for it to resolve before going on to the next iteration (and initializing another Promise chain).

Either put the loop in an async function and await the Promise chain on each iteration (so that the next iteration doesn't start until the current iteration's has completely finished):

 //timeout timeout = function(fn, pkg) { var t = setTimeout(function() { fn(pkg); clearTimeout(t); }, 1000); }; //Promise function p01 = function(check) { return new Promise(function(RS, RJ) { var echo = 'Run P01'; timeout(RS, echo); }); }; p02 = function(check) { return new Promise(function(RS, RJ) { var echo = 'Run P02'; timeout(RS, echo); }); }; p03 = function(check) { return new Promise(function(RS, RJ) { var echo = 'Run P03'; timeout(RS, echo); }); }; //do for loop test (async () => { for (var i = 0; i < 3; i++) { await p01().then(function(echo) { console.log(echo); return p02(); }).then(function(echo) { console.log(echo); return p03(); }).then(function(echo) { console.log(echo); console.log('Done!'); }); } })(); 

Or have an outer Promise that you reassign and call .then on each time:

 //timeout timeout = function (fn, pkg) { var t = setTimeout(function () { fn(pkg); clearTimeout(t); }, 1000); }; //Promise function p01 = function (check) { return new Promise(function (RS, RJ) { var echo = 'Run P01'; timeout(RS, echo); }); }; p02 = function (check) { return new Promise(function (RS, RJ) { var echo = 'Run P02'; timeout(RS, echo); }); }; p03 = function (check) { return new Promise(function (RS, RJ) { var echo = 'Run P03'; timeout(RS, echo); }); }; //do for loop test let prom = Promise.resolve(); for (var i = 0; i < 3; i++) { prom = prom.then(p01).then(function (echo) { console.log(echo); return p02(); }).then(function (echo) { console.log(echo); return p03(); }).then(function (echo) { console.log(echo); console.log('Done!'); }); };