ECMAScript 6承诺

Question

我很想理解承诺，但我有问题。

function commentFirst() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('first');
      resolve('value');
    }, 1500);
  });
}

commentFirst().then((val) => {
  setTimeout(function() {
    console.log(val + ' 1')                   
  }, 2000);

  return val;
}).then((val1) => console.log(val1 + ' 2'));

我希望得到这样的输出：

first
value 1
value 2

我做错了什么？

Answer 1

在第二个.then中，您正在执行一个没有任何承诺的setTimeout，因此它将立即执行并返回，甚至在setTimeout执行之前也是如此。我已经添加了一个promise，当setTimeout执行时，它将解析promise，然后继续执行您需要的订单。

function commentFirst() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('first');
      resolve("value");
    }, 1500);
  });
}

commentFirst()
  .then((val) => {
    return new Promise(resolve => {
      setTimeout(function() {
        console.log(val + ' 1')
        resolve(val);
      }, 2000);
    })
  })
  .then((val1) => console.log(val1 + ' 2'));

codepen demo

Answer 2

您可以通过创建多个promise来改进您的代码，使您的代码更具可重用性。

因此，您将能够链您的承诺。

但是，您应该看到方法，该方法允许您返回一个promise，该promise在可迭代参数中的所有promise都已解析时解析。

你可以对两个函数进行十进制，这两个函数将返回一些承诺：

function first(){
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('first');
    }, 1000);
  });
}

function commentFirst(id){
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('value ' + id);
    }, 1000);
  });
}

然后，您有两个选择：

选项1: Perform a chaining promise

• 选项2:使用Promise.all() method

选项1:链接

first().then((data) => {
  //Log first
  console.log(data);
  //Return promise to print value 1
  return commentFirst(1);
}).then((data) => {
  //Log value 1
  console.log(data);
  //Return promise to print value 2
  return commentFirst(2);
}).then((data) => {
  //log value 2
  console.log(data);
});

选项2: Promise.all()

Promise.all([first(), commentFirst(1), commentFirst(2)]).then((data) => {
  data.forEach((elm) => console.log(elm));
});

如您所见，选项2的比选项1的短。实际上，.all()方法用于处理多个promise，并返回包含所有结果的单个promise。