javascript - 这段代码如何使用 promises 顺序获取 url 并将其顺序加载到 html 中？

Question

我是 javascript promises 的新手，我在 JavaScript Promises 阅读了关于 promises 的教程.给定的代码出现在“创建序列”标题下。

基本上 story 是一个 JSON 对象，它有一个 chapterUrls 数组，其中包含指向各个章节 JSON 对象的链接。getJSON(url) 发出 GET 请求，并在成功时返回一个带有 JSON 对象的 promise ，因为它是 promiseValue。

故事 json:

{
  "heading": "<h1>A story about something</h1>",
  "chapterUrls": [
    "chapter-1.json",
    "chapter-2.json",
    "chapter-3.json",
    "chapter-4.json",
    "chapter-5.json"
  ]
}

Json 章节:

{
  "chapter": 1,
  "html": "<p>Chapter 1 text: Cras sollicitudin orci ac velit adipiscing, ut faucibus urna auctor. Pellentesque in sem nec sem molestie malesuada. Sed aliquam mi sit amet sollicitudin luctus. Aenean quis tempus sem, in viverra metus. Maecenas sed urna bibendum, cursus lectus sed, ultricies risus.</p>"
}

我无法理解这段代码中发生了什么。这段代码如何顺序获取章节并将它们顺序加载到 html 中？

    // Start off with a promise that always resolves
var sequence = Promise.resolve();

// 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.html);
  });
});

Answer 1

forEach 循环有效地构建了一个 then 链，如下所示:

Promise.resolve().then(function() {
    return getJSON(story.chapterUrls[0]).then(function(chapter) {
        addHtmlToPage(chapter.html);
    });
}).then(function() {
    return getJSON(story.chapterUrls[1]).then(function(chapter) {
        addHtmlToPage(chapter.html);
    });
}).then(function() {
    return getJSON(story.chapterUrls[2]).then(function(chapter) {
        addHtmlToPage(chapter.html);
    });
}).then(function() {
    // etc.
});

当然，根据story.chapterUrls的长度，阶段会多多少少。

以 Promise.resolve() 作为“种子 promise ”，链将在构建阶段完成后立即开始结算(实际上是在稍后的事件回合中尽快完成) .第一个 getJSON() 将被调用，当它解析时，第一个 addHtmlToPage() ，当它解析时，第二个 getJSON() 和依此类推(每个阶段都有自己的事件轮次)。

一旦构建，除非发生错误，否则链将一直解析。应该包含一个错误处理程序来记录/显示错误，否则它将是无声的。

story.chapterUrls.forEach(function(chapterUrl) {
  sequence = sequence.then(function() {
    return getJSON(chapterUrl);
  }).then(function(chapter) {
    addHtmlToPage(chapter.html);
  });
}).catch(function(error) {
  console.log(error);
});