在 Javascript 中使用 promise.all 时如何从承诺数组中获取数据

Question

我正在尝试使用 promise.all 从 restcountries.eu API 访问数据，但我不知道我做错了什么。

function displayCurrency(currencyone, currencytwo) {

    Promise.all([
        fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`),
        fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`)
    ])
        .then(function (responses) {
            return responses.map(function (response) {
                return response.json();
            });
        }).then(function (data) {

            console.log(data[0]);


        }).catch(function (error) {
            console.log(error);
        });

}

data[0] 使用数组显示已解决的承诺。我尝试访问数组中的数据，例如 'name' 和 'currencies'，但我一直未定义。

Answer 1

映射后，您将创建一个 .json() 调用数组 - Promise 数组。您需要再次调用 Promise.all。

// Not actually runnable, just hidden by default;
// this is very inelegant, use the other method instead

function displayCurrency(currencyone, currencytwo) {
    const arrOfJsonProms = Promise.all([
        fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`),
        fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`)
    ])
        .then(function (responses) {
            return responses.map(function (response) {
                return response.json();
            })
        });
    Promise.all(arrOfJsonProms)
        .then(function (data) {
            console.log(data[0]);
        }).catch(function (error) {
            console.log(error);
        });
}

但是在初始 Promise.all 中调用 .json 会更优雅，这样代码会更简单并且你不必在下载主体之前等待每个连接初始化：

function displayCurrency(currencyone, currencytwo) {
    Promise.all([
        fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`).then(res => res.json()),
        fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`).then(res => res.json())
    ])
        .then(function (data) {
            console.log(data[0]);
        }).catch(function (error) {
            console.log(error);
        });
}

Answer 2

您还可以使用 async/await，类似于以下内容：

const displayCurrency = async (currencyone, currencytwo) => {
  try {
    let responses = await Promise.all([
      fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`),
      fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`),
    ]);
    let data = await Promise.all(
      responses.map(async (response) => await response.json())
    );
    console.log(data[0]);
  } catch (error) {
    console.log(error);
  }
};

displayCurrency("eur", "aud");

在 Javascript 中使用 promise.all 时如何从承诺数组中获取数据

How do I access fetch data from an array of promises when using promise.all in Javascript

javascript

api

fetch

fetch-api