Question

异步的思维方式并不容易接受。如果你一开始理解起来有困难，那么可以先试试写个同步的方法，就像这样：

try {
  var story = getJSONSync('story.json');
  addHtmlToPage(story.heading);

  story.chapterUrls.forEach(function(chapterUrl) {
    var chapter = getJSONSync(chapterUrl);
    addHtmlToPage(chapter.html);
  });

  addTextToPage("All done");
}
catch (err) {
  addTextToPage("Argh, broken: " + err.message);
}

document.querySelector('.spinner').style.display = 'none';

它可以正常工作！但是它是同步的，这导致加载内容时会阻塞浏览器。要想让它在异步的方式下工作，需要使用“then”方法来将要做的事情一个个串联起来执行。

getJSON('story.json').then(function(story) {
  addHtmlToPage(story.heading);

  // TODO: 获取每一章节的内容并显示


}).then(function() {
  // 全部完成！


  addTextToPage("All done");
}).catch(function(err) {
  // 如果有错误发生就执行到这里


  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  // 总是要隐藏掉

 spinner
  document.querySelector('.spinner').style.display = 'none';
});

但是我们该如何遍历章节内容的 URL 并依次获取内容呢？注意，下面的方法是行不通的：

story.chapterUrls.forEach(function(chapterUrl) {
  // 获取章节内容


  getJSON(chapterUrl).then(function(chapter) {
    // 将章节内容添加到页面上


    addHtmlToPage(chapter.html);
  });
});

“forEach”并不会对异步操作做特殊处理，此时我们页面上章节内容显示的顺序是它们加载完成的顺序，所以必须要解决显示顺序的问题。