时间戳

首页 > 解决方案 > 如何在我的计算器功能中实现承诺？

javascript - 如何在我的计算器功能中实现承诺？

问题描述

我用 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() 函数。为了实现这一点，我需要对代码进行最小的更改。我已经搜索了很多关于 Promise、异步函数、thens 等，但没有找到一个简单的“这里是如何在一个简单的事件驱动程序中使用 Promise”，而且我还没有设法编写一个与该程序等效的工作以上。一旦我有了一个工作的 hello world，我就可以从那里构建。

假设promise 总是会解决，reject 永远不需要处理。我所说的“最小变化”并不一定是指最少的字符，而是最容易理解或新概念最少的意思。

标签： javascriptpromise

解决方案

要使用 Promise，您可以调用.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 关键字将暂停你的函数并等待 promise 解决，然后恢复你的代码。这可以使语法更清晰，但仍涉及承诺。

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

推荐阅读