Javascript выборка для переменных проблем

Question

Посредственный разработчик javascript здесь и мне нужна помощь.

Я хочу сделать GET вызов URL несколько раз в цикле for.

Я пытаюсь использовать fetch, ноиз-за ситуации обещания / времени я не могу понять, как заставить это работать.

Ниже приведен код, и вполне возможно, что подход извлечения не имеет смысла для того, что я пытаюсь сделать,Буду признателен за вашу помощь, либо поможет мне с кодом или сказать, что я идиот и посоветую альтернативу:)

var fromAmt = 100;
var fromOOP = 50;
var fromGM = 50;
var fromCur = "USD"
var toCur = ["USD","EUR","INR","GBP","SGD"];

var adjAmt = [];

async function getConversionAsync(fcur,tcur,amt) 
{
  let response = await fetch('https://data.fixer.io/api/convert?access_key=xyxyxyxyxyxyxy&from=' + fcur + '&to=' + tcur + '&amount=' + amt);
  let data = await response.json()
  return data;
}

for (i = 0; i < toCur.length; i++) {

getConversionAsync(fromCur,toCur[0].toString(),fromAmt)
  .then(data => display(data));

}


function display(thing){
adjAmt.push(thing.result);
}

document.getElementById("something").innerHTML = adjAmt[0].toString();

Answer 1

В вашем примере, document.getElementById("something").innerHTML = adjAmt[0].toString(); выполняется до того, как что-либо будет переведено в adjAmt. Вам нужно дождаться завершения вызовов цикла, прежде чем отобразить результат, и для этого вы можете заключить все в асинхронную функцию.

const fromAmt = 100;
const fromOOP = 50;
const fromGM = 50;
const fromCur = 'USD';
const toCur = ['USD', 'EUR', 'INR', 'GBP', 'SGD'];

const adjAmt = [];

const getConversionAsync = async (fcur, tcur, amt) => {
    const response = await fetch(`https://data.fixer.io/api/convert?access_key=xyxyxyxyxyxyxy&from=${fcur}&to=${tcur}&amount=${amt}`);
    return response.json();
}

function display(thing) {
    adjAmt.push(thing.result);
}

(async () => {
    for (i = 0; i < toCur.length; i += 1) {
        const data = await getConversionAsync(fromCur, toCur[0], fromAmt);
        display(data);
    }
    document.getElementById('something').innerHTML = adjAmt[0].toString();
})();

Answer 2

Некоторые небольшие изменения, чтобы он работал без вызова API, но вы захотите получить доступ к правильному индексу в вашем цикле. Я не знаю, какой именно вывод вы хотите получить, но в этом случае я просто соединил все значения в массиве.

Кроме того, необходимо установить innerHTML, как только все значенияизвлекаются из API, поэтому я бы даже предложил сделать это, когда цикл завершится, или какое-либо другое событие типа «done».

Кроме того, вы можете использовать Promise.all вместо цикла, что япошел бы с лично.

var fromAmt = 100;
var fromOOP = 50;
var fromGM = 50;
var fromCur = "USD"
var toCur = ["USD", "EUR", "INR", "GBP", "SGD"];

var adjAmt = [];

async function getConversionAsync(fcur, tcur, amt) {
  let response = await sampleRequest()
  /* let data = await response.json() */
  return response;
}

for (i = 0; i < toCur.length; i++) {
  const data = getConversionAsync(fromCur, toCur[i].toString(), fromAmt).then(data => {
	  display(data)
  })
}


function display(thing) {
  adjAmt.push(thing);
  document.getElementById("something").innerHTML = adjAmt.join(', ')
}

function sampleRequest() {
	return new Promise((resolve, reject) => {
  	resolve(Math.round(Math.random() * 1000))
  })
}

<div id="something"></div>