Question

我在使用Promise.all()

时遇到了一些问题

我试图使用这个链：

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

您应该在内部承诺中声明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完成时调用最后一个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))
   }
)

Answer 3

bind在这里使用不正确。 .bind(this)的结果是绑定函数。它没有被调用，除非它被明确地调用为this.fadeOut.bind(this)()。

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

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

Promise.all（）和then（）问题

3 个答案: