Reputation: 47
How does one allow conditional promises to fire/not fire and still resolve correctly?
Let me explain the context. I have three values to look up. At first I did
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
});
This worked fine. However, the AJAX calls are slow and take a lot of time. When the user reaches this point after creating a new report, they already have populated a list of each of these items, meaning in that case I can just do
var Customer = customerList.findbyID(report.CustomerID);
var Vehicle = vehicleList.findbyID(report.VehicleID);
var Dealer = dealerList.findbyID(report.DealerID);
//do some code here
Then, it turns out that each of these lists might be populated and might not, sometimes one or two are and the others aren't. So ideally, I'd want to only do each ajax call if the corresponding local list doesn't exist.
But what is the best way to do this? This is what I tried doing, but it is not working:
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
});
Upvotes: 0
Views: 86
Reputation: 379
You can use await keyword :
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
}
According to MDN:
if the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise.
If you don't want to use the async keyword, you can use Promise.all() but you need to store your promises/functions into an array
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
});
Still according to 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).
Upvotes: 1