Javascript:为什么我自己的 promise 序列不能按照教程中给出的那样工作？

Question

在本教程中，有一个示例构建一系列加载操作，如下所示:example link

function getJSON(url) {
  let prom = new Promise((resolve, reject) => {
    setTimeout(()=>{resolve(`I'm am ${url}`);}, (Math.random()*3000 + 1000));
  });
  return prom;
}

let story = {};
story.chapterUrls = ['www.fakegoogle.com', 'www.fakeyahoo.cn', 'www.fakeamazon.ca'];

let sequence = Promise.resolve();

function addHtmlToPage(val) {
    console.log(val);
}

// Loop through our chapter urls
story.chapterUrls.forEach(function(chapterUrl) {
  // Add these actions to the end of the sequence
  sequence = sequence.then(function() {
    return getJSON(chapterUrl);
  }).then(function(chapter) {
    addHtmlToPage(chapter);
  });
})

我对其做了一些修改，我自己的版本如下:

function getJSON(url) {
  let prom = new Promise((resolve, reject) => {
    setTimeout(()=>{resolve(`I am ${url}`);}, (Math.random()*3000 + 1000));
  });
  return prom;
}

let story = {};
story.chapterUrls = ['www.fakeweb1.com', 'www.fakeweb2.com', 'www.fakeweb3.com'];
let sequence;

function addHtmlToPage(val) {
    console.log(val);
}

story.chapterUrls.forEach(function(chapterUrl) {
  sequence = sequence || getJSON(chapterUrl);
  sequence.then(function() {
    return getJSON(chapterUrl);
  }).then(function(chapter) {
    addHtmlToPage(chapter);
  });
})

我的理论是，由于 getJSON 已经返回一个 Promise，因此没有理由像教程中那样引入初始 Promisified 值。

但是，我的版本加载 Action 是完全随机的，而在教程给出的示例中，三步加载 Action 始终是有序的。

有人能指出这样的链接的关键是什么吗？它总是需要初始值吗？从不多余？谢谢。

Answer 1

您仍然需要将调用 .then 的结果分配回 sequence:

sequence = sequence.then(...)

否则，您将仅对 sequence 的原始值调用 sequence.then()。

Could someone point out what the key to a chaining like this is?

我上面说的。

Does it ALWAYS need an initial value?

嗯，你必须从某个地方开始，但如何发生取决于你。