javascript - 如何遍历数组/将数组映射到返回包含另一个 promise 的 promise 的函数

Question

我一直在尝试循环遍历一组项目，以便每个项目都用于返回 promise 的操作，但在该 promise 中还有另一个 promise 。我没有得到想要的流量。我究竟做错了什么？或者，还有更好的方法。由于条件，我不能使用太多链接。我以多种方式尝试了 async/await，结果仍然是相同的不良结果。

为了清晰起见，代码已经过简化。 fetch 调用实际上是数据库操作，但行为仍然相同；在这种情况下，我还使用了单元素数组。

var names = ['mike'];
console.log('black');

var fn = function doThings(name) {
  return new Promise((resolve) => {
    console.log('blue');

    var char = name.substr(1);
    getNum(char);
    console.log('violet');

    function getNum(ch) {
      console.log('green');

      fetch('fetchfrom.url')
      .then(response => {
        console.log('orange');

        return response.json();
      })
      .then(n => {

        if(n === 2) {
          console.log('red1');

          fetch('fetchfrom.url')
          .then(response => {
            console.log('yellow');

            return response.json();
          }).then(color => {
            if(n === 2) {
              console.log('red2');

              resolve(5);
            }
            else {
              console.log('brown2');

              resolve(10);
            }
          });
          console.log('lilac');

        } else {
          console.log('brown1');

          resolve(20);
        }

      });
    }

  })


}

var actions = names.map(fn);

Promise.all([actions])
.then(() => {
  console.log('done');
})

我希望日志按顺序排列(假设 n 始终等于 2): 黑...蓝...绿...橙...红1...黄...红2...淡紫色...紫...完成

但相反，我始终得到: 黑色...蓝色...绿色...紫罗兰色...深色...橙色...红色1...黄色...红色2...淡紫色

Answer 1

您需要正确传播 promise 。

• 您的示例中不需要 new Promise() 构造函数，您需要在执行异步操作时正确调用 .then()。
• 当您在 .then() 处理程序中调用 fetch() 时，返回 promise 以保持 promise 链的完整性。
• 异步操作后没有代码，例如:fetch().then();，因为之后的代码将立即执行，而不是在 fetch 调用完成后执行。

您可以使用 async/await，您的示例将如下所示:

var names = ['mike'];
console.log('black');

async function getNum(ch) {
  console.log('green');
  let response = await fetch('fetchfrom.url');
  console.log('orange');
  let n = await response.json();

  if (n === 2) {
    console.log('red1');
    let res = await fetch('fetchfrom.url');
    console.log('yellow');
    let color = await res.json();
    if (n === 2) {
      console.log('red2');
      return 5;
    } else {
      console.log('brown2');
      return 10;
    }
    console.log('lilac');
  } else {
    console.log('brown1');
    return 20;
  }
}

async function doThings(name) {
  console.log('blue');
  var char = name.substr(1);
  let num = await getNum(char);
  console.log('violet');
  return num;
}

var actions = names.map(fn);
Promise.all([actions])
  .then(() => {
    console.log('done');
  });

没有 async/await 并且你只能做简单的 promise :

var names = ['mike'];
console.log('black');

function getNum(ch) {
  console.log('green');
  return fetch('fetchfrom.url').then(response => {
    return response.json();
  }).then(n => {
    console.log('orange');
    if (n === 2) {
      console.log('red1');
      return fetch('fetchfrom.url').then(res => {
        console.log('yellow');
        return res.json();
      }).then(color => {
        if (n === 2) {
          console.log('red2');
          return 5;
        } else {
          console.log('brown2');
          return 10;
        }
      }).then(result => {
        console.log('lilac');
        return result;
      });
    } else {
      console.log('brown1');
      return 20;
    }
  });
}

function doThings(name) {
  console.log('blue');
  var char = name.substr(1);
  return getNum(char).then(num => {
    console.log('violet');
    return num;
  });
}

var actions = names.map(fn);
Promise.all([actions])
  .then(() => {
    console.log('done');
  });

两者都应产生预期的日志顺序。