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

我用JavaScript编写了一个类似计算器的应用程序，主要是为了让它可以在任何浏览器中运行。它有许多输入字段。当我按下calculate按钮时，它从这些字段收集数据，调用各种函数，并显示结果。没有异步的事情要做，没有可能延迟或失败的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>

功能变压器（仪表）
{
var outstring=安装+安装；
回报突出；
}
函数计算（）
{
var srcStr=document.mainform.src.value；
var转换=变压器（srcStr）；
document.mainform.dst.value=已转换；
}
输入数据

计算

输出数据

我想将transformer（）函数替换为一个库中返回承诺的函数。为了实现这一点，我需要对代码进行的最小更改是什么。我已经搜索了很多承诺、异步函数等，但没有找到一个简单的“下面是如何在简单的事件驱动程序中使用承诺”，我还没有成功地编写上述程序的等效工作。一旦我有了一个工作的hello世界，我就可以从那里开始构建

---

假设承诺总是会解决，拒绝永远不需要处理。我所说的“最小更改”并不一定意味着最少的字符，而是最容易理解的，或者使用最少的新概念。

假设

transformer

返回一个承诺，该承诺用转换后的字符串解析：

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

---

要使用承诺，请调用

。然后对其调用
，并指定一旦该值可用时要运行的代码：

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

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

这是使用承诺的代码。注意结果端


功能变压器（仪表）{
返回新承诺（（解决、拒绝）=>{
常数超出=插入+插入；
决心（突出）；
});
}
函数计算（）{
var srcStr=document.querySelector（'#src'）.value；
transformer（srcStr）.then（result=>document.querySelector（'#dst'）。value=result）；
}

输入数据

计算
输出数据
最简单的解决方案是将
变压器
设为一个内部计算（这也需要是一个
异步
函数）


异步函数转换器（instring）{
var outstring=安装+安装；
回报突出；
}
异步函数计算（）{
var srcStr=document.mainform.src.value；
var转换=等待变压器（srcStr）；
document.mainform.dst.value=已转换；
}

输入数据

计算

输出数据
第一步返回一个承诺，第二步，使用它。@epascarello是的，我在搜索中读了好几遍，在代码中看到了它，它有我不理解或认为我需要的其他功能。如果transformer（）返回的是承诺而不是提示值，那么在上面的代码中会是什么样子？
返回新承诺（（resolve，reject）=>{resolve（whatYouWantToReturn）；}）
等待构造看起来非常有用。但你说“如果这是一个选择”。什么时候不可能？这将仅在新（ish）浏览器上运行。库函数中是否有任何东西会阻止在调用代码中使用wait？我该如何检查它呢？async/await是该语言最近添加的一个功能。现代浏览器支持它，但旧的浏览器不支持。您可以在此处查看支持它的详细信息：。如果您确实需要在这些浏览器上运行，您仍然可以使用async await编写代码，但是您的构建过程将需要有一个步骤将其转换为旧代码。