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

Question

我是 javascript promises 的新手，我在 JavaScript Promises 阅读了关于 promises 的教程。给定的代码出现在标题 "Creating a sequence" 下。

基本上故事是一个 JSON object，它有包含指向各个章节的链接的 chapterUrls 数组 JSON objects.getJSON(url) 发出 GET 请求，并且成功时 returns 具有 JSON object 的承诺，因为它是 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>"
}

我无法理解 code.How 这段代码中发生了什么 顺序获取章节 并 将它们加载到 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

我自己对 Promises 的理解有限，但我是这样理解的：

根据代码中的注释，从一个空的 Promise 对象开始。此承诺将立即生效。

然后，对于每一章URL，序列首先是getJSON（这本身就是一个承诺，当JSON被获取时它会解决），然后是将处理后的 JSON 作为 HTML 添加到页面的函数 - 因为这个没有 return 任何东西，它会立即解析。

想法是，由于您要将 getJSON 和 addHtmlToPage 函数添加到序列中，因此它们将按顺序解析。主要因素是 getJSON 本身就是一个承诺，只有在请求完成时才会解决。这样一来，就会按照数组的顺序，一个一个地加载。

这与更多 "traditional" AJAX 请求形成对比，在这些请求中，它们可能不会按照发送的相同顺序完成。在 Promise 真正成为 "thing" 之前，AJAX 请求必须是同步的，否则就必须进行巧妙的欺骗（例如，将一个空的 <div> 作为占位符，AJAX 请求将在完成时填充）。

Answer 2

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() 作为 "seed promise"，链将在构建阶段完成后立即开始稳定（实际上是在稍后的事件回合中尽快完成）。第一个 getJSON() 将被调用，当它结算时，第一个 addHtmlToPage() 和当它结算时，第二个 getJSON() 等等（每个阶段在它自己的事件回合中）。

一旦建立，除非发生错误，否则链将一直解析。 log/display 一个错误应该包含一个错误处理程序，否则它将是无声的。

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

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

How does this code use promises to sequentially fetch urls and load it sequentially to html?

javascript

json

asynchronous

promise

es6-promise