Promise.all() 和 then() 问题

Question

我对@9​​87654321@ 有一些问题

我正在尝试使用这个链：

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(
    Promise.all([
        this.fadeOut.bind(this),
        this.preload.bind(this)
    ])  
)
.then(this.fadeIn.bind(this))

但由于某种原因，second Promise.all() 中的 2 个函数甚至没有被调用？例如 fadeOut() 和 preload() 似乎根本没有被调用，并且链只是跳到最后的 then() 并执行 fadeIn()

关于我做错了什么有什么想法吗？

Answer 1

您需要将fadeOut 和preload 包装在一个函数中，以便在解决.all 时调用它们，否则将立即调用它们。

下面的代码显示了一种正确的方法

function newContainerLoading() {
  return new Promise((res) => {
    setTimeout(() => {
      console.log('newContainerLoading');
      res()
    }, 1000)
   })
 }

function gsapAnim() {
  return new Promise((res) => {
    setTimeout(() => {
      console.log('gsapAnim');
      res()
    }, 1000)
   }) 
}

function fadeOut() {
    return new Promise((res) => {
    setTimeout(() => {
      console.log('fadeOut');
      res()
    }, 1000)
   })
}

function preload() {
  return new Promise((res) => {
    setTimeout(() => {
      console.log('preload');
      res()
    }, 1000)
   })  
}


function fadeIn() {
 console.log('fadeIn')
}


Promise.all([
    newContainerLoading(),
    gsapAnim()
])
.then(()=> 
    Promise.all([
        fadeOut(),
        preload()
    ])  
)
.then(fadeIn)

Answer 2

bind 在这里用错了。 .bind(this) 的结果是绑定函数。它不会被调用，除非像this.fadeOut.bind(this)() 那样显式调用它。

将bind 与promise 一起使用的目的是使用绑定函数作为回调。 Promise.all 不接受回调，但 then 接受。而Promise.all 返回一个promise，所以它必须用箭头函数包装。应该是：

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(() => 
    Promise.all([
        this.fadeOut(),
        this.preload()
    ])  
)
.then(this.fadeIn.bind(this))

Answer 3

您应该在内部承诺中声明then部分并使用变量来存储父this，请参见以下内容：

var self = this;

var newContainerLoading = "dummy";
function gsapAnim(){
  console.log("gsapAnim");
  return "gsapAnim";
}
function fadeOut(){
  console.log("fadeOut");
  return "fadeOut";
}
function preload(){
  console.log("preload");
  return "preload";
}
function fadeIn(){
  console.log("fadeIn");
  return "fadeIn";
}

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(values => {
      Promise.all([
          self.fadeOut(),
          self.preload()
      ]).then(values => {console.log(values)})
   }
)
.then(self.fadeIn.bind(self))

如果你想保持链，你应该在第一个完成时调用最后一个 Promise，见如下：

var self = this;

var newContainerLoading = "dummy";
function gsapAnim(){
  console.log("gsapAnim");
  return "gsapAnim";
}
function fadeOut(){
  console.log("fadeOut");
  return "fadeOut";
}
function preload(){
  console.log("preload");
  return "preload";
}
function fadeIn(){
  console.log("fadeIn");
  return "fadeIn";
}

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(values => {
      Promise.all([
          self.fadeOut(),
          self.preload()
      ]).then(self.fadeIn.bind(self))
   }
)