如何在点击时执行多个承诺[重复]答案

【问题标题】：How to execute several promises on click [duplicate]如何在点击时执行多个承诺[重复]
【发布时间】：2018-12-20 00:54:42
【问题描述】：

我正在尝试使用 Promise 制作游戏，并且仅在鼠标单击（向下和向上）时调用它们，将游戏状态从第一个 Promise (A) 传递到最后一个 Promise (C)，并对其进行更新。如果 Promise B 正确执行，则 Promise C 根本不会执行。是否可以链接多个 Promise 并仅在事件触发时执行它们？

class A {
  static draw() {
    return new Promise((resolve) => {
      const state = {name: 'Alex'};
      resolve(state);
    })
  }
}

class B {
  static draw(state) {   
    const div = document.querySelector('.app');
    div.addEventListener('mousedown', () => {
      return new Promise((resolve) => {
      state.lastname = 'Johnson';
      console.log('state with ln ' + state)
      resolve(state);
     })
    }) 
  }
}

class C {
  static draw(state) {   
    const div = document.querySelector('.app');
    div.addEventListener('mouseup', () => {
      return new Promise((resolve) => {
      state.age = '23';
      console.log('state with age ' + state)
      resolve(state);
     })
    })
  }
}

A.draw()
  .then(res => {
  B.draw(res)
   .then(res => C.draw(res))
})

【问题讨论】：

你研究了什么？这不是一个新问题，并且有大量资源可以帮助您“链式承诺”：google.com/search?q=javascript+chain+promises
请注意，您在 addEventListeners 中的承诺将从您的外部 draw 函数返回。
真的怀疑在这里使用 Promise 是一种实用的方法。
@charlietfl 我同意 - 它们不是为重复事件而设计的，它们只适用于一次性事件。

标签： javascript

【解决方案1】：

你的承诺是背对背的。它们需要在您的绘图函数范围内创建（并由这些函数返回），然后在回调中解析，例如：

class B {
  static draw(state) { 
    const div = document.querySelector('.app');
    return new Promise((resolve) => {
      div.addEventListener('mousedown', () => {
        state.lastname = 'Johnson';
        console.log('state with ln ' + state)
        resolve(state);
      });
    }); 
  }
}

但是，这样的 Promise 只能解决一次，这就引出了一个问题，即 Promise 是否是您想要实现的目标的正确模型。

【讨论】：

【解决方案2】：

这是关于链式承诺的快速介绍

var firstMethod = function() {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('first method completed');
         resolve({data: '123'});
      }, 2000);
   });
   return promise;
};


var secondMethod = function(someStuff) {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('second method completed');
         resolve({newData: someStuff.data + ' some more data'});
      }, 2000);
   });
   return promise;
};

var thirdMethod = function(someStuff) {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('third method completed');
         resolve({result: someStuff.newData});
      }, 3000);
   });
   return promise;
};

firstMethod()
   .then(secondMethod)
   .then(thirdMethod);

【讨论】：