javascript - 如何混合 promise 和非 promise 的功能？

Question

如何允许有条件的 promise 触发/不触发并且仍然正确解决？

让我解释一下上下文。我有三个值要查找。一开始我是这么做的

var CustomerReceived = myAjaxLibCall("Customer", "ID", report.CustomerID);
var VehicleReceived  = myAjaxLibCall("Vehicle", "ID", report.VehicleID);
var DealerReceived  = myAjaxLibCall("Dealer", "ID", report.DealerID);

$.when(CustomerReceived,
       VehicleReceived,
       DealerReceived)
.then((Customer,
       Vehicle,
       Dealer) => {
    //do some code here
});

这工作得很好。然而，AJAX 调用速度很慢并且需要很长时间。当用户在创建新报告后达到这一点时，他们已经填充了每个项目的列表，这意味着在这种情况下我可以这样做

var Customer = customerList.findbyID(report.CustomerID);
var Vehicle = vehicleList.findbyID(report.VehicleID);
var Dealer = dealerList.findbyID(report.DealerID);

//do some code here

然后，事实证明，这些列表中的每一个都可能已填充，也可能未填充，有时只有一两个列表已填充，而其他列表则未填充。因此，理想情况下，我只想在相应的本地列表不存在时才执行每个 ajax 调用。

但是最好的方法是什么？这是我尝试做的，但它不起作用:

var CustomerReceived = customerList.length === 0
                     ? myAjaxLibCall("Customer", "ID", report.CustomerID)
                     : customerList.findbyID(report.CustomerID);

var VehicleReceived  = vehicleList.length === 0
                     ? myAjaxLibCall("Vehicle", "ID", report.VehicleID)
                     : vehicleList.findbyID(report.VehicleID);

var DealerReceived  = dealerList.length === 0
                    ? myAjaxLibCall("Dealer", "ID", report.DealerID)
                    : dealerList.findbyID(report.DealerID);

$.when(CustomerReceived,
       VehicleReceived,
       DealerReceived)
.then((Customer,
       Vehicle,
       Dealer) => {
    //do some code here
});

Answer 1

等待

您可以使用await关键字:

async function someStuff()
{
    var CustomerReceived = customerList.length === 0
                         ? myAjaxLibCall("Customer", "ID", report.CustomerID)
                         : customerList.findbyID(report.CustomerID);

    var VehicleReceived  = vehicleList.length === 0
                         ? myAjaxLibCall("Vehicle", "ID", report.VehicleID)
                         : vehicleList.findbyID(report.VehicleID);

    var DealerReceived  = dealerList.length === 0
                        ? myAjaxLibCall("Dealer", "ID", report.DealerID)
                        : dealerList.findbyID(report.DealerID);

    const Customer = await CustomerReceived;
    const Vehicle = await VehicleReceived;
    const Dealer = await DealerReceived;

    //do some code here
}

根据 MDN:

if the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise.

<小时/>

无需等待

如果不想使用async关键字，可以使用Promise.all()但你需要将你的 promise /函数存储到一个数组中

var CustomerReceived = customerList.length === 0
                     ? myAjaxLibCall("Customer", "ID", report.CustomerID)
                     : customerList.findbyID(report.CustomerID);

var VehicleReceived  = vehicleList.length === 0
                     ? myAjaxLibCall("Vehicle", "ID", report.VehicleID)
                     : vehicleList.findbyID(report.VehicleID);

var DealerReceived  = dealerList.length === 0
                    ? myAjaxLibCall("Dealer", "ID", report.DealerID)
                    : dealerList.findbyID(report.DealerID);

Promise.all([ CustomerReceived, VehicleReceived, DealerReceived ])
    .then(([ Customer, Vehicle, Dealer ]) => {
        //do some code here
    });

仍然根据 MDN:

If all of the passed-in promises fulfill, or are not promises, the promise returned by Promise.all is fulfilled asynchronously. In all cases, the returned promise is fulfilled with an array containing all the values of the iterable passed as argument (also non-promise values).