Question

我已经用JavaScript编写了类似计算器的应用程序，主要是使其可以在任何浏览器中运行。它具有许多输入字段。当我按下计算按钮时，它将从这些字段中收集数据，在其上调用各种函数，并显示结果。没有要做的异步工作，没有可能会延迟或失败的Web或光盘读取，用户触发了一个事件，然后必须等待，直到产生答案为止。

下面的片段或多或少是用于此类过程的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>

我想用一个返回promise的库中的函数替换transformer（）函数。为此，我需要对代码进行的最小更改是什么？我已经搜索了很多promise，异步函数，thes等，但是没有找到一个简单的“这里是如何在一个简单的事件驱动程序中使用promise”，而且我还没有设法编写一个等效的程序以上。一旦有了工作良好的世界，就可以从那里开始构建。

假设诺言将始终得到解决，拒绝就不再需要处理。 “最小变化”不一定代表最少的字符，而是最容易理解或具有最少的新概念。

Answer 1

假设transformer返回了一个promise，它将使用转换后的字符串进行解析：

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

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是一个选项，则可以在async函数中使用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设为async function，并在内部进行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>

当然，这仅适用于支持此语法（which is any major browser released in 2017 or later）的浏览器。如果您需要支持较早的基于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>

当然，此仅适用于支持promise（which is any major browser released in 2015 or later）的浏览器，但是您可以使用Bluebird之类的库将其修补到大多数浏览器中不会。

如何在计算器功能中实现承诺？

4 个答案: