JavaScript中如何在for循环内正确使用async await处理异步请求

你遇到的数组长度随机问题是因为fetch是异步非阻塞API：你在循环中发起118个请求后立刻返回了空数组，此时大部分请求还没有收到服务端响应，只有部分先完成的请求会把数据push进数组，最终数组的长度完全取决于你打印时已经完成的请求数量，所以每次结果都是随机的。

使用Promise.all等待所有异步请求全部完成后再统一返回结果，修复后的代码如下：

async function getElements() {
    const url = "https://neelpatel05.pythonanywhere.com/element/atomicnumber?atomicnumber=";
    const requestList = [];
    // 循环变量改用let避免异步回调的变量指向错误
    for(let i = 1; i <= 118; i++){
        const newurl = url + i;
        // 将所有请求的Promise存入数组
        requestList.push(
            fetch(newurl)
            .then(response => response.json())
            .then(data => data.symbol)
        );
    }
    // 等待所有请求完成，按发起顺序返回结果数组
    return Promise.all(requestList);
}

// 异步函数需要通过then或者await拿最终结果
getElements().then(elements => console.log(elements));

如果需要兼容部分请求失败的场景，避免单个请求失败导致整个Promise.all rejected，可以对单个请求做错误捕获：

requestList.push(
    fetch(newurl)
    .then(response => response.json())
    .then(data => data.symbol)
    .catch(err => {
        console.log(`原子序数${i}的请求失败`, err);
        // 失败位置返回自定义占位值
        return null;
    })
);

内容的提问来源于stack exchange，提问作者Amey patil