按照被调用的顺序返回从Ajax/HTTP制作的数据列表

Question

有没有一种方法可以按照调用AJAX请求的顺序显示您的AJAX数据，而无需使用承诺，也没有同步代码或jQuery，但只是纯粹的JavaScript？

例如：

//file 1 takes 3 seconds & file2 takes 1 second 
input: ['example1.com', 'example2.com'] 
output: [example1_response, example2_response] 

我开始在我的HTML页面建立一个小玩具问题。我在我的网页&内附加了两个占位符<div>的文本wait，然后当我的URL请求完成时，相应的<div>的占位符文本被替换。但是，仍然没有达到根据我提出请求的顺序加载我的内容的最终目标。

的jsfiddle：https://jsfiddle.net/nf4p1bgf/5/

var body = document.getElementsByTagName('body')[0] 
var urls = [ "website1.com", "website2.com"]; 


//Helper function to simulate AJAX request 
function fakeAjax(url,cb) { 
    var fake_responses = { 
    "website1.com": "data from website1.com", 
    "website2.com": "data from website2.com" 
    }; 

    var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000; 
    console.log(`Requesting: ${url}. Response time: ${randomDelay}`); 

    setTimeout(function(){ 
    cb(fake_responses[url]); 
    },randomDelay); 
} 


urls.forEach(function(url) { 
    //creating placeholder <div>'s before AJAX data returns 
    var div = document.createElement("div"); 
    div.innerHTML = "this is a place holder - please wait"; 
    body.appendChild(div); 

    fakeAjax(url, function(data) { 
    div.innerHTML = data; 
    }); 
}); 

编辑& SOLUTION的jsfiddle这里：https://jsfiddle.net/fa707qjc/11/

//*********** HELPERS (SEE CODE BELOW HELPERS SECTION) ***********/ 

var body = document.getElementsByTagName('body')[0] 
var urls = ["website1.com","website2.com"]; 

function fakeAjax(url,cb) { 
    var fake_responses = { 
    "website1.com": "data from website1.com", 
    "website2.com": "data from website2.com" 
    }; 
    var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000; 
    console.log(`Requesting: ${url}. Response time: ${randomDelay}`); 

    setTimeout(function(){ 
    cb(fake_responses[url]); 
    },randomDelay); 
} 

function createElement(typeOfElement, text){ 
    var element = document.createElement(typeOfElement) 
    element.innerHTML = text; 
    return element; 
} 


function handleResponse(url, contents){ 
    //if I haven't recieved response from x url 
    if(!(url in responses)){ 
    responses[url] = contents; 
    } 

    //defining order for response outputs 
    var myWebsites = ['website1.com','website2.com']; 

    // loop through responses in order for rendering 
    for(var url of myWebsites){ 
    if(url in responses){ 
     if(typeof responses[url] === "string"){ 
      console.log(responses[url]) 
      //mark already rendered 
      var originalText = responses[url]; 
      responses[url] = true; 
      var p = createElement('p', originalText); 
      body.appendChild(p); 
     } 
    } 
    //can't render it/not complete 
    else{ 
     return; 
    } 
    } 
} 



//*********** CODE START *********** 
function getWebsiteData(url) { 
    fakeAjax(url, function(text){ 
     console.log(`Returning data from ${url} w/response: ${text}`) 
     handleResponse(url, text); 
    }); 
} 

//As we get our responses from server store them 
var responses = {}; 

// request all files at once in "parallel" 
urls.forEach(function(url){ 
    getWebsiteData(url); 
}) 

Answer 1

使用Promise。

Promise.all(urls.map(function(url) { 
    return new Promise(function(resolve, reject) { 
    request(url, function(data, error) { 
     if (error) { 
     return reject(error); 
     } 
     resolve(data); 
    }) 
    }); 
})).then(function(results) { 
    console.log(results); 
});