forEach循環內的異步API調用

Question

我遇到了一個似乎無法解決的問題，我猜想我在異步行為方面缺少一些要點。

任務相對簡單：具有不同貨幣的錢夾需要轉換為單一貨幣。 我想從以下API獲取匯率：

https://free.currencyconverterapi.com/api/v5/convert?q= $ {from} _ $ {to}＆compact = y

以$ {from}為起始貨幣，$ {to}為目標貨幣。

我將不同的貨幣存儲在稱為頭寸的對象中，如下所示：

[
    {'currency': "EUR",
    "amount": 10},
    {'currency': "CNY",
    "amount": 100},
  ]

因此，任務是將100EUR和100CNY轉換為美元。

為了收集匯率，我想遍歷以下函數中的單個頭寸：

    collectExRates(targetCurrency) {
    let exRatesDict = {}
    this.positions.forEach( (position) => { 
      exRatesDict[position.currency] = this.parseUrl(position.currency, targetCurrency)
    });
    return exRatesDict
}

並且parseUrl是：

    parseUrl(from, to) {
    const exRateName = from + '_' + to;
    var rate;
    return fetchUrl(`https://free.currencyconverterapi.com/api/v5/convert?q=${from}_${to}&compact=y`, function(error, meta, body){
            rate = JSON.parse(body)[exRateName].val
            console.log("RATE", rate)
            return rate
        });
}

我已經嘗試了幾件事（例如創建異步forEach，Promises，異步等待等），但是我無法獲得預期的結果，即返回將貨幣映射到其各自匯率的匯率字典。

我將非常感謝您的幫助。

Answer 1

問題是異步方法返回Promise，您需要等待它們解決。 接下來的常見模式是：

Promise.all(arr.map(v => someAsyncFunc(v))).then((resolvedValues) => {
  resolvedValues.forEach((value) => {
    // Do your stuff here
  });
});

因此，基本上，您是在初始化一堆異步調用，等待它們使用Promise.all解析， Promise.all再對解析的數據執行一些操作。

Answer 2

您應該嘗試這樣的事情：

function fetchUrls(urlList) {
  let promises = [];
  for(idx in urlList) {
    promises.push(fetch(urlList[idx]));
  }
  return Promise.all(promises);
}

fetchUrls(your_list_of_urls)
.then(console.log)