javascript - .then() 在 Promise.all() 之前执行

Question

我正在学习 promise ，并尝试使用以下代码将它们链接起来。在此，.then() 首先执行:

function myPromise1()
{
  console.log("Promise", 1);
  return Promise.all([
    new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("This should be before 'Yay!' for 1");
        resolve(1);
      }, 3000);
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("This should be before 'Yay!' for 2");
        resolve(2);
      }, 3000);
    })
  ]);
}

function myPromise2() {
  console.log("Promise", 2);
  var arr = [1,2,3,4];
  return Promise.all(arr.map(i => {
    new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("This should be before 'Yay!' for i= " + i);
        resolve("Success!" + i);
      }, 3000)
    })
  }));
}

function anotherPromise(val) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(val);
    }, 3000);
  });
}

myPromise2()
  .then((msg) => {
  console.log("Yay! " + msg);
  return anotherPromise("Awesome!");
})
  .then((msg2) => {
  console.log("This should be Awesome:", msg2);
})
  .catch((err) => {
  console.log("Uh no, this is a lie --->", err);
});

console.log("This will print as second line after the method name, even though its the last line.");

<小时/>

这是输出:

Promise 2
This will print as second line after the method name, even though its the last line.
Yay! ,,,
This should be before 'Yay!' for i= 1
This should be before 'Yay!' for i= 2
This should be before 'Yay!' for i= 3
This should be before 'Yay!' for i= 4
This should be Awesome: Awesome!

Process finished with exit code 0

如您所见，.then() 之前被调用，因此不会返回值。

但是，如果我改为调用 myPromise1()，我会得到所需的输出。值也会返回，并且在两个 Promise 之后调用 .then()。

如何解决 myPromise2() 的问题？

Answer 1

您忘记从此处的 map 方法返回:

function myPromise2() {
  console.log("Promise", 2);
  var arr = [1,2,3,4];
  return Promise.all(arr.map(i => {
  /* missing return ---> */  new Promise((resolve, reject) => { 
      setTimeout(() => {
        console.log("This should be before 'Yay!' for i= " + i);
        resolve("Success!" + i);
      }, 3000)
    })
  }));
}

function myPromise1() {
  console.log("Promise", 1);
  return Promise.all([
    new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("This should be before 'Yay!' for 1");
        resolve(1);
      }, 3000);
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("This should be before 'Yay!' for 2");
        resolve(2);
      }, 3000);
    })
  ]);
}

function myPromise2() {
  console.log("Promise", 2);
  var arr = [1, 2, 3, 4];
  return Promise.all(arr.map(i => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("This should be before 'Yay!' for i= " + i);
        resolve("Success!" + i);
      }, 3000)
    })
  }));
}

function anotherPromise(val) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(val);
    }, 3000);
  });
}

myPromise2()
  .then((msg) => {
    console.log("Yay! " + msg);
    return anotherPromise("Awesome!");
  })
  .then((msg2) => {
    console.log("This should be Awesome:", msg2);
  })
  .catch((err) => {
    console.log("Uh no, this is a lie --->", err);
  });

console.log("This will print as second line after the method name, even though its the last line.");