在javascript中使用for循环创建一个异步获取序列

create a sequence of asynchronous fetches with for loop in javascript

本文关键字：一个 异步 获取 javascript for 创建 循环      更新时间：2023-09-26

我有一些JSON格式的文件，它们的名字是这样的:

chapter1。json, chapter2。json,第三章。Json，…

我想在javascript中获取承诺文件的内容，并在HTML页面中依次显示它们。但我不想重复then()方法。相反，我想使用for循环。我不想使用node.js.

有谁能告诉我怎么做吗?非常感谢。

我找到了答案。

function get(url) {
// Return a new promise.
return new Promise(function (resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = function () {
        // This is called even on 404 etc
        // so check the status
        if (req.status == 200) {
            // Resolve the promise with the response text
            resolve(req.response);
        }
        else {
            // Otherwise reject with the status text
            // which will hopefully be a meaningful error
            reject(Error(req.statusText));
        }
    };
    // Handle network errors
    req.onerror = function () {
        reject(Error("Network Error"));
    };
    // Make the request
    req.send();
});
}
function getJSON(url) {
return get(url).then(JSON.parse);
}
$(function () {
getJSON('story.json').then(function(story) {
    $("#message").append(story.heading);
    // Take an array of promises and wait on them all
    return Promise.all(
        // Map our array of chapter urls to
        // an array of chapter json promises
        story.chapterUrls.map(getJSON)
    );
}).then(function(chapters) {
    // Now we have the chapters jsons in order! Loop through…
    chapters.forEach(function(chapter) {
        // …and add to the page
        $("#message").append(chapter.html);
    });
    $("#message").append("All done");
}).catch(function(err) {
    // catch any error that happened so far
    $("#message").append("Argh, broken: " + err.message);
}).then(function() {
    document.querySelector('.spinner').style.display = 'none';
});
});

的故事。json是:

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

此代码首先并行获取所有章节，然后按顺序显示。

相关文章：