Как я могу реализовать обещание в моей функции калькулятора?

Question

Я написал калькулятороподобное приложение на JavaScript, главным образом, чтобы оно работало в любом браузере. Имеет несколько полей ввода. Когда я нажимаю кнопку «Рассчитать», она собирает данные из этих полей, вызывает различные функции и отображает результат. Не нужно выполнять асинхронную работу, не нужно извлекать данные из Интернета или с диска, которые могут задержать или дать сбой, пользователь запускает событие и затем должен ждать, пока ответ не будет получен.

Фрагмент, приведенный ниже, более или менее является Hello World для такого рода процессов.

<script type="text/javascript">
function transformer(instring)
{
    var outstring = instring + instring;
    return outstring;
}

function calculate()
{
    var srcStr = document.mainform.src.value;
    var transformed = transformer(srcStr);
    document.mainform.dst.value = transformed; 
}
</script>

<form name="mainform">
Input data <input type="text" name="src" value="abc"/><br>
<button type="button" onclick="javascript:calculate();">Calculate</button><br>
Output data <input type="text" name="dst"  />
</form>

Я хотел бы заменить функцию transformer () на функцию из библиотеки, которая возвращает обещание. Какое минимальное изменение в коде мне нужно сделать, чтобы добиться этого. Я много искал обещания, асинхронные функции, затем и т. Д., Но не нашел простого «вот как использовать обещание в простой программе, управляемой событиями», и мне пока не удалось написать рабочий эквивалент программы выше. Как только у меня будет рабочий мир, я смогу строить оттуда.

Предположим, что обещание всегда разрешится, отклонение никогда не нужно обрабатывать. Под «минимальным изменением» я не обязательно подразумеваю наименьшее количество символов, но самое простое для понимания или с наименьшим количеством новых концепций.

Answer 1

Самым простым решением было бы сделать transformer async функцию и await ее внутри вычисления (что также должно быть async функцией).

async function transformer(instring) {
  var outstring = instring + instring;
  return outstring;
}

async function calculate() {
  var srcStr = document.mainform.src.value;
  var transformed = await transformer(srcStr);
  document.mainform.dst.value = transformed;
}

<form name="mainform">
  Input data <input type="text" name="src" value="abc" /><br>
  <button type="button" onclick="javascript:calculate();">Calculate</button><br>
  Output data <input type="text" name="dst" />
</form>

Конечно, это будет работать только в браузерах, которые поддерживают этот синтаксис (, который является любым основным браузером, выпущенным в 2017 году или позже ).Если вам требуется поддержка более старого синтаксиса на основе Promise, приведенный выше код фактически идентичен следующему:

function transformer(instring) {
  var outstring = instring + instring;
  return Promise.resolve(outstring);
}

function calculate() {
  var srcStr = document.mainform.src.value;
  transformer(srcStr).then(function(transformed) {
    document.mainform.dst.value = transformed;
  });
}

<form name="mainform">
  Input data <input type="text" name="src" value="abc" /><br>
  <button type="button" onclick="javascript:calculate();">Calculate</button><br>
  Output data <input type="text" name="dst" />
</form>

И, конечно, this будет работать только в браузерах, которые поддерживают обещания (, который является любым основным браузером, выпущенным в 2015 году илипозже ), но вы можете использовать такую ​​библиотеку, как Bluebird , чтобы подключить ее к большинству браузеров, которые этого не делают.

Answer 2

Чтобы использовать обещание, вы вызываете .then для него и указываете, какой код вы хотите запустить, как только будет доступно значение:

function transformer(instring)
{
  var outstring = instring + instring;
  return Promise.resolve(outstring);
}

function calculate()
{
  var srcStr = document.mainform.src.value;
  transformer(srcStr)
    .then(transformed => {
      document.mainform.dst.value = transformed; 
    });
}

В качестве альтернативы, если параметр async / await можно использоватьключевое слово await в асинхронной функции.Ключевое слово await приостановит вашу функцию и дождется разрешения обещания, а затем возобновит ваш код.Это может привести к более чистому синтаксису, но обещания все еще участвуют.

async function calculate()
{
    var srcStr = document.mainform.src.value;
    var transformed = await transformer(srcStr);
    document.mainform.dst.value = transformed; 
}

Answer 3

Вот ваш код с обещанием.Обратите внимание на результат.

function transformer(instring) {
  return new Promise((resolve, reject) => {
    const outstring = instring + instring;
    resolve(outstring);
  });
}

function calculate() {
  var srcStr = document.querySelector('#src').value;
  transformer(srcStr).then(result => document.querySelector('#dst').value = result);
}

<form name="mainform">
  Input data <input type="text" id="src" value="abc" /><br>
  <button type="button" onclick="javascript:calculate();">Calculate</button><br> Output data <input type="text" id="dst" />
</form>

Answer 4

Предполагая, что transformer возвращает обещание, которое разрешается с преобразованной строкой:

function calculate() {
    var srcStr = document.mainform.src.value;
    transformer(srcStr).then(function (transformed) {
        document.mainform.dst.value = transformed;
    });
}