请查看此代码段

Question

我想设置一个承诺，只有在满足a和b条件时解决。我写了以下内容，试图证明我的目标：

<body>
  <header>
    <div id="header-inner">
      <nav>
        <ul>
          <li><a href="index.html" class="current">Home</a></li>
          <li><a href="courses.html" class="current">Courses</a></li>
          <li><a href="about.html" class="current">About</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="section-1">
    <div class="banner-inner">
      <img class="img" alt="" src="https://d2mt0dng9y3p4j.cloudfront.net/newandimproved/wp-content/uploads/2016/12/shop-with-a-sheriff-mockup.jpg">
      <div class="centered"><a href="courses.html">Start Learning</a></div>
    </div>
  </section>
  <p>ANY HTML ADDED APPEARS BEHIND THE IMAGE AND I CANNOT FIGURE OUT HOW TO CHANGE IT TO APPEAR BENEATH THE IMAGE AS IT WOULD WITH A FRESH HTML PAGE</p>
</body>

现在我可以看到为什么它没有做我想要的：只要firstRandomNumber或secondRandomNumber解析，它们就会触发secondMethod，这就是我所期待的。

我如何进行设置，以便secondMethod只会在firstRandomNumber 和 secondRandomNumber解析时触发？我觉得它可能与Promise.all()有关，但我无法让它发挥作用。

后续问题：上面代码中的一些意外行为是，firstRandomNumber和secondRandomNumber 都会解析。这对我来说似乎没有意义：怎么会发生这种情况，两个数字完全相同？

提前致谢！

Answer 1

您可以使用async功能并等待两个操作结束。

请查看此代码段

var coreData = {}

var firstMethod = function() {
  var promise = new Promise(function(resolve, reject) {
    //First number I want to resolve
    let firstRandomNum = Math.random();
    setTimeout(function() {
      //console.log('First Number; ' + firstRandomNum);
      coreData.firstRandomNumber = firstRandomNum;
      resolve(coreData);
    }, 2 * firstRandomNum);
  });
  return promise;
};

var anotherFirstMethod = function() {
  var promise = new Promise(function(resolve, reject) {
    //Second number I want to resolve
    let secondRandomNum = Math.random();
    setTimeout(function() {
      //console.log('Second Number; ' + secondRandomNum);
      coreData.secondRandomNumber = secondRandomNum;
      resolve(coreData);
    }, 2 * secondRandomNum);
  });

  return promise;
};

//Here is where I'd like both *both* numbers to resolve to
var secondMethod = async function(someStuff) {
  await Promise.all([firstMethod(), anotherFirstMethod()])

  console.log('All complete');
  console.log(coreData);
};

secondMethod();

请参阅？现在你的逻辑是同步的。

资源

async function

更新

根据@Keith的建议，使用函数Promise.all()

使用await Promise.all([firstMethod(), anotherFirstMethod()])两种方法可以并行运行。

使用函数`Promise.all()`的方法。

var coreData = {}

var firstMethod = function() {
  var promise = new Promise(function(resolve, reject) {
    //First number I want to resolve
    let firstRandomNum = Math.random();
    setTimeout(function() {
      //console.log('First Number; ' + firstRandomNum);
      coreData.firstRandomNumber = firstRandomNum;
      resolve(coreData);
    }, 2 * firstRandomNum);
  });
  return promise;
};

var anotherFirstMethod = function() {
  var promise = new Promise(function(resolve, reject) {
    //Second number I want to resolve
    let secondRandomNum = Math.random();
    setTimeout(function() {
      //console.log('Second Number; ' + secondRandomNum);
      coreData.secondRandomNumber = secondRandomNum;
      resolve(coreData);
    }, 2 * secondRandomNum);
  });

  return promise;
};

//Here is where I'd like both *both* numbers to resolve to
var secondMethod = function() {
  Promise.all([firstMethod(), anotherFirstMethod()]).then(() => {
    console.log('All complete');
    console.log(coreData);
  });  
};

secondMethod();

我可以做出只在设置多个变量时解决的承诺吗？

1 个答案:

请查看此代码段

资源

更新

使用函数`Promise.all()`的方法。

我可以做出只在设置多个变量时解决的承诺吗？

1 个答案:

请查看此代码段

资源

更新

使用函数Promise.all()的方法。

使用函数`Promise.all()`的方法。