将 JS fetch() 请求放在 for() 循环中是否可以？答案

【问题标题】：Is it OK to put a JS fetch() request in a for() loop?将 JS fetch() 请求放在 for() 循环中是否可以？
【发布时间】：2023-02-26 11:31:18
【问题描述】：

我需要气象站网站上的 JS 来获取每个传感器的值（总共 4 次），然后更新相应的 HTML 元素。

在服务器端，URL /reading?name=...&r=... 返回传感器“名称”的读数“r”（例如温度）。

我现在拥有的是：

function updateReadings() {
    secondsSinceLastUpdate = secondsSinceLastUpdate++;

    fetch('reading?name=bme280&r=1')
    .then( response => response.json() )
    .then( response => {
        //console.log(response);
        document.getElementById("bme280-1-rt1").innerHTML = response;
        secondsSinceLastUpdate = 0;
    } );


    fetch('reading?name=bme280&r=2')
    .then( response => response.json() )
    .then( response => {
        //console.log(response);
        document.getElementById("bme280-1-rt2").innerHTML = response;
        secondsSinceLastUpdate = 0;
    } );


    fetch('reading?name=bme280&r=3')
    .then( response => response.json() )
    .then( response => {
        //console.log(response);
        document.getElementById("bme280-1-rt3").innerHTML = response;
        secondsSinceLastUpdate = 0;
    } );


    fetch('reading?name=ds18b20-1&r=1')
    .then( response => response.json() )
    .then( response => {
        //console.log(response);
        document.getElementById('ds18b20-1-rt1').innerHTML = response;
        secondsSinceLastUpdate = 0;
    } );
}

setInterval(updateReading, 1000); // to update the readings every second

我想以某种方式将所有这些提取放入一个结构中（例如 for() 循环？），这样我就不必为每次修改重写代码四次。我不确定将它推入 for() 循环是否是个好主意，但这是我想到的第一个解决方案。

我不想在服务器端更改任何内容：它必须为每个读数提供单独的 URL（我不能同时为所有读数使用一个 fetch()）。

【问题讨论】：

标签： javascript fetch-api

【解决方案1】：

您可以执行循环并将它们添加到一个 promise 数组，然后使用 promise all 等待它们全部解决吗？

function updateReadings() {
    secondsSinceLastUpdate = secondsSinceLastUpdate++;

    const sensors = [
        { name: 'bme280', r: 1 },
        { name: 'bme280', r: 2 },
        { name: 'bme280', r: 3 },
        { name: 'ds18b20-1', r: 1 }
    ];

    const promises = [];
    for (const sensor of sensors) {
        const { name, r } = sensor;
        promises.push(fetch(`reading?name=${name}&r=${r}`)
            .then(response => response.json())
            .then(response => {
                document.getElementById(`${name}-${r}-rt1`).innerHTML = response;
            }));
    }

    Promise.all(promises)
        .then(() => {
            secondsSinceLastUpdate = 0;
        });
}

【讨论】：