Перезапись переменных в функциях JS

106
15 февраля 2021, 04:00

Первый день изучаю JS. Задача: спарсить курс биткоина в долларах, спарсить курс доллара в рублях, перемножить значения.

Проблема в том, что при вызове фунции Btc2Rub() вылетает ошибка "неизвестная переменная", но это логично, т.к. переменный объявляю в функциях.

Пробовал объявить "глобальные переменные" для btccourse и usdcourse, в надежде, что в функциях они перезапишутся, затем перемножатся. Объявлял так: в первых строчках кода var btccourse = 0;, но переменная не перезаписывалась, оставаясь нулем.

Как мне решить эту проблему?

$(document).ready(function() {
  getBtc();
  getUsd();
  Btc2Rub();
});

function getBtc() {
  $.get(
    "https://api.coindesk.com/v1/bpi/currentprice.json",
    function(data) {
      data = JSON.parse(data);
      btccourse = data.bpi.USD.rate_float;
      console.log("BTC = " + btccourse + " Usd");
    }
  )
};

function getUsd() {
  $.get(
    "https://www.cbr-xml-daily.ru/daily_json.js",
    function(data) {
      data = JSON.parse(data);
      usdcourse = data.Valute.USD.Value;
      console.log("USD = " + usdcourse + " Rub");
    }
  )
};
function Btc2Rub() {
  rubcourse = btccourse * usdcourse;
  console.log(rubcourse)
}
Answer 1

Для выполнения асинхронного HTTP запроса используется метод $.ajax, который лежит в основе всех Ajax запросов отправляемых при помощи jQuery.

Объект jqXHR, возвращаемый методом $.ajax реализует интерфейс Promise, дающий ему все свойства, методы и поведение Promise. Представляет результат успешного или неудачного завершения асинхронной операции.

Метод $.when принимает произвольное число промисов, и возвращает один Deferred объект. Обработчик done получит результаты каждого промиса, в вашем вопросе - два результата.

$(document).ready(function() { 
  var btc = get('https://api.coindesk.com/v1/bpi/currentprice.json'); 
  var usd = get('https://www.cbr-xml-daily.ru/daily_json.js'); 
 
  $.when(btc, usd).done(printResult); 
}); 
 
function get(url) { 
  return $.ajax({ 
    url: url, 
    dataType: 'json' 
  }); 
} 
 
function printResult([btc], [usd]) { 
  var btccourse = btc.bpi.USD.rate_float; 
  var usdcourse = usd.Valute.USD.Value; 
  var rubcourse = btccourse * usdcourse; 
 
  // Распечатаем результат. 
  result.textContent = rubcourse; 
}
<pre id="result"></pre> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Вариант с использованием "сахара" в виде async/await, плюс обработка ошибок через try...catch.

$(document).ready(function() { 
  Btc2Rub() 
    .then(function(rubcourse) { 
      // Распечатаем результат. 
      result.textContent = rubcourse; 
    }); 
}); 
 
function get(url) { 
  return $.ajax({ 
    url: url, 
    dataType: 'json' 
  }); 
} 
 
async function Btc2Rub() { 
  try { 
    const btc = await get('https://api.coindesk.com/v1/bpi/currentprice.json'); 
    const usd = await get('https://www.cbr-xml-daily.ru/daily_json.js'); 
 
    const btccourse = btc.bpi.USD.rate_float; 
    const usdcourse = usd.Valute.USD.Value; 
 
    return btccourse * usdcourse; 
  } catch (error) { 
    console.error(error); 
  } 
}
<pre id="result"></pre> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Как-то так:

$(document).ready(function() {
  $.when(getBtc(), getUsd()).then(Btc2Rub);
});

function getBtc() {
  return $.get(
    "https://api.coindesk.com/v1/bpi/currentprice.json",
    function(data) {
      data = JSON.parse(data);
      return data.bpi.USD.rate_float;
    }
  )
};

function getUsd() {
  return $.get(
    "https://www.cbr-xml-daily.ru/daily_json.js",
    function(data) {
      data = JSON.parse(data);
      return data.Valute.USD.Value;
    }
  )
};
function Btc2Rub(btccourse, usdcourse) {
  var rubcourse = btccourse * usdcourse;
  console.log(rubcourse)
}
READ ALSO
Сериализация формы с групповыми полями
javascript

Сериализация формы с групповыми полями

Мне нужно передать поля формы get параметром, при этом группы полей например:

 109
Как передать сумму доставки в data-price у кнопки input?
javascript

Как передать сумму доставки в data-price у кнопки input?

Есть кнопка

 97
Высота блока под картинку с &ldquo;position: absolute&rdquo;
CSS

Высота блока под картинку с “position: absolute”

У меня в блоке есть картинка со свойством "position", которое имеет значение "asbolute"Картинка намного больше блока, и мне бы хотелось, чтобы блок...

 126
Как прижать footer к низу страницы
CSS

Как прижать footer к низу страницы

Footer находится посередине страницы и никуда не двигаетсяПодскажите, пожалуйста, в чем проблема?

 116