Javascript 如何使用fetch和Promise.all循环？

因此，我一直在关注一篇关于promises的MDN文章，并想知道如何修改以下代码，使其能够处理任意数量的文件（而不仅仅是3个）

函数fetchAndDecode（url）{
返回获取（url）。然后（响应=>{
如果（！response.ok）{
抛出新错误（`HTTP错误！状态：${response.status}`）；
}否则{
if（response.headers.get（“content-type”）=“image/jpeg”）{
返回response.blob（）；
}else if（response.headers.get（“内容类型”）=“文本/普通”）{
返回response.text（）；
}
}
})
.catch（e=>{
log（`您对资源“${url}”的获取操作出现问题：`+e.message）；
})
.最后（（）=>{
log（`fetch trument for“${url}”已完成。`）；
})
}
让coffee=fetchAndDecode（'coffee.jpg'）；
let tea=fetchAndDecode（'tea.jpg'）；
让description=fetchAndDecode（'description.txt'）；
承诺。所有（[咖啡、茶、描述]）然后（值=>{
console.log（值）；
//将承诺返回的每个值存储在单独的变量中；从blob创建对象URL
让objectURL1=URL.createObjectURL（值[0]）；
让objectURL2=URL.createObjectURL（值[1]）；
设descText=值[2]；
//在中显示图像
MDN特别指出，“如果您正在改进这段代码，您可能希望遍历一个要显示、获取和解码的项目列表，然后遍历Promise.all（）中的结果，运行不同的函数，根据代码类型显示每一项。这将使其适用于任意数量的项，而不仅仅是三项。“但我不确定如何执行此操作，希望您能提供帮助。谢谢。
代码的第二部分可以概括如下：

let urls = ['coffee.jpg', 'tea.jpg', 'description.txt'];

Promise.all(urls.map(fetchAndDecode)).then(values => {
    let elem;
    for (let value of values) {
        if (value instanceof Blob) {
            elem = document.createElement('img');
            elem.src = URL.createObjectURL(value);
        } else if (typeof value === "string") {
            elem = document.createElement('p');
            elem.textContent = value;
        } else {
            console.log("unexpected value type");
            continue;
        }
        document.body.appendChild(elem);
    }
});

守则的第二部分可概括如下：

let urls = ['coffee.jpg', 'tea.jpg', 'description.txt'];

Promise.all(urls.map(fetchAndDecode)).then(values => {
    let elem;
    for (let value of values) {
        if (value instanceof Blob) {
            elem = document.createElement('img');
            elem.src = URL.createObjectURL(value);
        } else if (typeof value === "string") {
            elem = document.createElement('p');
            elem.textContent = value;
        } else {
            console.log("unexpected value type");
            continue;
        }
        document.body.appendChild(elem);
    }
});

是实现建议的一种方法。这种方法允许更容易地修改资源列表，但实际上不会改变任何承诺代码

上面的
.map
代码相当于（resource=>fetchAndDecode（resource）），因为
fetchAndDecode
只接受
.map
将传递给它的第一个参数

是实现建议的一种方法。这种方法允许更容易地修改资源列表，但实际上不会改变任何承诺代码

上面的
.map
代码相当于（resource=>fetchAndDecode（resource））因为
fetchAndDecode
只接受
.map
将传递给它的第一个参数。
关于这一点，承诺没有什么特别的。承诺代码本身不会改变。它只是用做同样事情的循环替换代码的重复部分。@Bergi但我的意思是在语法方面，我怎么能做像file这样的事情呢s、 长度？我是否需要首先获取所有内容，然后创建一个数组，这样我就知道有多少文件了？然后，我如何知道将哪个参数传递给它的名称？从
const fileNames=['coffee.jpg'、'tea.jpg'、'description.txt'开始]
values
已经是一个数组了，所以可以考虑使用
foreach
循环这个数组。但是您还需要考虑文件类型。也就是说，您需要找到一种方法来传递文件类型和文件内容，因为您需要根据类型创建适当的html元素。现在它知道了类型pe，因为它是硬编码的。@muratgu您已经可以区分
值
，图像变成
Blob
实例，而文本文件变成字符串。这与承诺无关。承诺代码本身不会改变。它只是用做同样事情的循环替换代码的重复部分。@Bergi，但我的意思是，从语法角度看，我如何做files.length之类的事情？我是否需要先获取所有内容，然后创建一个数组，这样我就知道有多少文件？然后，我如何知道将哪个参数传递给它的名称？从
const fileNames=['coffee.jpg'，'tea.jpg'，'description.txt'开始
values
已经是一个数组了，所以可以考虑使用
foreach
循环这个数组。但是您还需要考虑文件类型。也就是说，您需要找到一种方法来传递文件类型和文件内容，因为您需要根据类型创建适当的html元素。现在它知道了类型pe，因为它是硬编码的。@muratgu您已经可以区分
值
，图像变成
Blob
实例，而文本文件变成字符串。
const resources = ['coffee.jpg', 'tea.jpg', 'description'];

const resourceRequests = resources.map(fetchAndDecode);

Promise.all(resourceRequests.then(values => {

...