JavaScript异步/等待变量null [重复]

Question

我正在使用 Promise 和 async 来等待网络请求完成。变量 info 使用 console.log(infos); 显示其值时为空；

我不确定为什么以及我做错了什么？

var processFruits = async () => {
    let infos = [];
    let fruits = ["apples", "pears", "bananas"]

    await fruits.forEach(async fruit => {
        let response = await getFruitInfo(fruit);
        infos.concat(response);
        console.log(response);
    });

    console.log(infos);
};

let getFruitInfo = (fruit) => new Promise((resolve, reject) => {
    fetch("https://www.fruitmap.org/api/trees", {
        method: 'GET',
    }).then(response => {
        if (response.ok) {
            resolve(response.json());
        } else {
            reject(error);
        }
    }).catch(error => {
        reject(error);
    });
});

Answer 1

.concat 不会修改您的原始引用，但会创建一个新引用，这就是您的 infos 数组仍然为空的原因。

var processFruits = async () => {
    let infos = [];
    let fruits = ["apples", "pears", "bananas"]

    fruits.forEach(async fruit => {
        let response = await getFruitInfo(fruit);
        infos = infos.concat(response); // here
        console.log(response);
    });

    console.log(infos);
};

let getFruitInfo = (fruit) => new Promise((resolve, reject) => {
    fetch("https://www.fruitmap.org/api/trees", {
        method: 'GET',
    }).then(response => {
        if (response.ok) {
            resolve(response.json());
        } else {
            reject(error);
        }
    }).catch(error => {
        reject(error);
    });
});

processFruits();

Answer 2

.forEach() 不返回任何内容，因此您的外部 await 不等待任何内容。

你需要调用.map()，它会返回一个由内部异步回调返回的promise数组。然后，您需要调用 Promise.all() 以将该承诺数组转换为对 await 的单个承诺：

await Promise.all(array.map(async ...));