Question

有没有办法按照你调用AJAX请求的顺序显示你的AJAX数据，而不使用promises，也没有同步代码或jQuery，只是纯粹的javascript？

例如：

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

我首先在HTML页面中设置了一个小玩具问题。我在我的网页＆amp;中添加了两个占位符<div>和文本wait。然后，当我的网址请求完成后，相应的<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;
  });
});

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

按照调用它们的顺序返回从Ajax / HTTP生成的数据列表

1 个答案: