javascript - 一道JS题：如何循环一个url列表，按顺序发送url

Question

有一个数组，里面存储的是10个url，需求是每次从数组中取出两个url，发送ajax请求获取数据，拿到这两个请求的结果后再继续从剩下的url中取出两个，重复之前的过程直到将这10个url发送完并都拿到结果。

这个用Promise要怎么编码实现？最好写出参考代码。大家帮帮忙！

Answer 1

var urls = ['url','...'], data = [];

var buildRequest = function(url) {
    if (url) {
        return $.get(url);
    }
};

var request = function() {
    if (urls && urls.length) {
        data.push(buildRequest(urls.shift()));
        data.push(buildRequest(urls.shift()));
    }
    if (data.length) {
        $.when.apply(this,data).then(function(res1,res2){
            //TODO
        }).then(function(){
            data = [];
            request();
        });
    }
};

request();

我一般会这样写

Answer 2

async/await 就是基于 Promise 的，但是更方便：

function run(urls) {
    let tmp = [];
    let datas = [];
    let res = urls.map(async url => {
        tmp.push(url);
        
        if (tmp.length === 2) {
            let data1 = await getData(tmp[0]);
            let data2 = await getData(tmp[1]);
            datas.push(data1, data2);
            tmp.length = 0;
        }
        
        return datas;
    });

    return res[res.length-1];
}

async function getData(url) {
    let data = await $.get(url);
    return data;
}

Answer 3

使用原生 AJAX 新 API: fetch
不过兼容性不是太好，可以引用兼容库：//cdn.bootcss.com/fetch/2.0.1/fetch.min.js
文档：https://developer.mozilla.org...

示例：

let urls = [
  'http://api.hitokoto.cn/?c=a',
  'http://api.hitokoto.cn/?c=a',
  'http://api.hitokoto.cn/?c=a',
  'http://api.hitokoto.cn/?c=a',
  'http://api.hitokoto.cn/?c=a',
]

function getJSON(url) {
  return fetch(url).then(res => res.json())
}

getJSON(urls[0])
.then(json => { 
  console.log(+new Date())
  console.info(json); 
  return getJSON(urls[1]) 
})
.then(json => {
  console.log(+new Date())
  console.info(json); 
  return getJSON(urls[2]) 
})

// 如果不介意用 babel 转码的话，可以使用 async / await
// 还需要引入垫片 http://cdn.bootcss.com/babel-polyfill/6.13.0/polyfill.min.js
// 示例：

let sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

(async () => {
  
  for (let url of urls) {
    
    await sleep(1000) // 等待 1000 毫秒再执行下面语句
    let json = await getJSON(url) // 等待结果返回再执行下面语句
    console.log(+new Date())
    console.info(json)
    
  }

})()

Answer 4

这样是不是可以？

var urls = [];
    var results = [];
    
    for(let i = 0 ; i < 5 ; i ++){
        var url1 = urls[2*i];
        var url2 = urls[2*i + 1];
        
        var p = new Promise(function(resolve,reject){
            ajax(url1,function(res1){
                resolve(res1);
            })
        });
        var q = new Promise(function(resolve,reject){
            ajax(url2,function(res2){
                resolve(res2);
            })
        });
        
        Promise.all([p,q]).then(function(data){
            results[2*i] = data[0];
            results[2*i + 1] = data[1];
        });
        
    }