按调用顺序返回由Ajax/HTTP生成的数据列表

Return a list of data made from an Ajax/HTTP in the order they were called

本文关键字：数据 列表 HTTP 顺序 调用 返回 Ajax      更新时间：2023-12-20

有没有一种方法可以按照调用AJAX请求的顺序显示AJAX数据，而不使用promise，也不使用同步代码或jQuery，只使用纯javascript？

例如：

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

我开始在HTML页面中设置一个小玩具问题。我在我的网页内添加了两个占位符CCD_ 1和文本CCD_；然后，当我的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;
  });
});

编辑&解决方案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);
})

使用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);
});
相关文章：