如何使客户端javascript函数调用api并使用api响应构造对象[重复]

Question

我有一个要求，我需要从客户端 Javascript 函数中调用 api，一旦我从 api 获得响应，我应该使用响应来构造变量值。我的功能如下所示。我面临的问题是，在函数可以返回完整的 api 响应之前，计算 totalAmt 的下一行被执行，并且由于 chkresponse1 为空，那么变量 totalAmt 没有被正确计算。仅供参考，getCheckFinalAmount() 在内部使用 XMLHTTPRequest 调用 api。

如何确保仅在获得 api 响应后才计算 totAmt？任何代码 sn-ps 都会很有帮助。

function applePayButtonClicked() {

     var chkresponse1=getCheckFinalAmount(); // this function returns the api response.

      var totalAmt = ((chkresponse.totals.sub_total / 100) + (chkresponse.totals.tax / 100) + tipamt).toFixed(2).toString();

}

Answer 1

您可以使用异步/等待。 async 函数将在每个 await 表达式处暂停，直到 promise 被解决。使用 try catch 块捕获任何错误也是一个好主意。

async function applePayButtonClicked() {
  try {
    const chkresponse1 = await getCheckFinalAmount();
    const totalAmt = ((chkresponse.totals.sub_total / 100) + (chkresponse.totals.tax       / 100) + tipamt).toFixed(2).toString();
  } catch (err) {
    console.log(err);
   //handle errors
  }
}

此解决方案假定 await 运算符后面的表达式是'awaitable'，这意味着它要么是 Promise，要么可以转换为已解析的 Promise。以下是 MDN 所说的：

await 表达式会导致异步函数执行暂停，直到 Promise 被解决（即完成或拒绝），并在完成后恢复异步函数的执行。恢复时，await 表达式的值是已实现的 Promise 的值。

如果 Promise 被拒绝，则 await 表达式抛出被拒绝的值。

如果 await 运算符后面的表达式的值不是 Promise，则将其转换为已解析的 Promise。