html获取多个文件

时间:2015-04-16 13:35:13

标签: html5 standards fetch-api

我想使用新的fetch api(https://fetch.spec.whatwg.org/)一次获取多个文件。可以原生吗?如果是这样,我应该如何利用这些承诺呢?

2 个答案:

答案 0 :(得分:5)

var list = [];
var urls = ['1.html', '2.html', '3.html'];
var results = [];

urls.forEach(function(url, i) { // (1)
  list.push( // (2)
    fetch(url).then(function(res){
      results[i] = res.blob(); // (3)
    })
  );
});

Promise
  .all(list) // (4)
  .then(function() {
    alert('all requests finished!'); // (5)
  });

这是未经测试的代码!此外,它还依赖于Array.prototype.forEach和ES6的新Promise对象。这个想法是这样的:

  1. 遍历所有网址。
  2. 对于每个网址,使用fetch API获取该网址,将返回的承诺存储在list
  3. 此外,请求完成后,将结果存储在results
  4. 创建一个新的承诺,当list中的所有承诺都已解决(即所有请求都已完成)时,该承诺会解决。
  5. 享受完全填充的results

答案 1 :(得分:0)

在Kotlin中实施Boldewyn's solution时,我将其简化为:

fun fetchAll(vararg resources: String): Promise<Array<out Response>> {
    return Promise.all(resources.map { fetch(it) }.toTypedArray())
}

这在JavaScript中大致翻译为:

function fetchAll(...resources) {
    var destination = []
    resources.forEach(it => {
        destination.push(fetch(it))
    })
    return Promise.all(destination)
}

之前,我尝试使用map而不是forEach + push来创建新数组,但是由于某些原因,这根本行不通。