如何使客户端 JavaScript 函数调用 API 并使用 api 响应来构造对象

Question

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

如何确保仅在获得 api 响应后计算 totAmt？任何代码片段都将非常有帮助。

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。异步函数将在每个等待表达式处暂停，直到解决承诺。此外，使用 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 运算符后面的表达式是"可等待的"，这意味着它要么是承诺，要么可以转换为已解析的承诺。以下是MDN所说的：

await 表达式会导致异步函数执行暂停，直到 Promise 结算(即，履行或拒绝(，并在履行后恢复异步函数的执行。恢复时，等待表达式的值是已实现承诺的值。

如果承诺被拒绝，await 表达式将抛出拒绝的值。

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