为什么我的代码按此顺序打印？ （JavaScript承诺）

Question

I'm trying to understand promises/asynchronous programming, and I don't understand why this code prints "1 2 0" rather than "2 1 0". From the third block of code: shouldn't f1 fire only after f2 logs "2" to the console?

const f1 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
      resolve(console.log(1));
  }, 1000)
})

const f2 = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    resolve(console.log(2))
  }, 1500)
})

f2.then(
  f1.then(()=>{
    setTimeout(()=>{
        console.log(0);
    }, 500)}
));

I'm trying to work on a program that needs several (like 6ish) asynchronous functions to fire in a very specific sequence, ie f2() must wait until f1() fully receives data from a request to execute, and I'm actually not sure how to do this...

Answer 1

You are running your f1 and f2 operations in parallel, starting them both one after the other. Both are started and then they are both in flight at the same time.

Then, you need to pass a function reference to .then() so it's a function that the promise infrastructure can call sometime in the future (when the host promise resolves). Instead, you are passing a promise to .then() which doesn't do anything useful.

If you change your code to this:

const f1 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
      resolve(console.log(1));
  }, 1000)
})

const f2 = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    resolve(console.log(2))
  }, 1500)
})

f2.then(() => {
  f1.then(()=> {
    setTimeout(()=>{
        console.log(0);
    }, 500)}
  });
});

Then, you will start both the f1 and f2 timers immediately. Then, only after both f2 and f1 finish will you start the third timer and you should get the output 1 2 0 . 1 comes first because it's a shorter timer than 2 which are both running in a parallel. 0 comes last because it's timer isn't started until both 1 and 2 are done.

---

If you want to chain them to get 2 1 0 , then you have to not start 2 and 1 at the same time. Make f1 and f2 into functions, not promises so you can sequence when they are called.

  function delay(t) { return new Promise(resolve => { setTimeout(resolve, t); }); } function f1() { return delay(1000).then(() => { console.log(1); }) } function f2() { return delay(1500).then(() => { console.log(2); }) } function f3() { return delay(1500).then(() => { console.log(0); }) } // chain them together f2().then(f1).then(f3).then(() => { console.log("done"); }); 

This kind of .then() chaining basically says this:

• Execute f2()
• Register a .then() handler on the promise that .f2() returns so that when that promise resolves, it will then (and only then) call f1.
• On the new promise that f2().then() returns, register a .then() handler on it so that when f1 is done, it will then call f3.
• On the new promise that f2().then().then() returns, register a callback that will be called when f3 is done.