My TypeScript service loads base data through HTTP requests from a server. The requests are for various data, arranged in order from independent data to data that depends on other data. Due to the asynchronous nature of HTTP requests, there is no guarantee that loading data (such as customers in this case) will finish before loading the dependent data (such as devices) begins. I want the loading of dependent data (devices) to start only after the loading of referenced data (customers) has completed. I believe I need to use promises, but how do I implement this in the following code situation?
export class BaseDataService
{
customers: Customer[] = new Array();
devices: Device[] = new Array();
// Loads the base data starting with independent data and then dependent data
loadBaseData() {
this.loadCustomers();
// This operation should start after loading customers has finished
this.loadDevices();
}
// Function to load customers and add them to the collection
loadCustomers() {
console.log("Load customers");
var requestURL = 'https://myurl/customers_endpoint.php';
var auth = window.localStorage.getItem('auth');
var requestparam = "auth="+auth;
var request = new XMLHttpRequest();
request.open('POST', requestURL);
request.setRequestHeader("content-type", "application/x-www-form-urlencoded");
request.send(requestparam);
request.onload = () => {
if (request.status === 200){
console.log("Load customers response");
var response = request.response;
this.customers = this.parseCustomers(response);
console.log("Load customers complete");
}
else if (request.status === 401){
alert("Unauthorized");
}
else {
alert("Unexpected error");
}
}
}
// Function to load devices and add them to the collection
loadDevices() {
console.log("Load devices");
var requestURL = 'https://myurl/devices_endpoint.php';
var auth = window.localStorage.getItem('auth');
var requestparam = "auth="+auth;
var request = new XMLHttpRequest();
request.open('POST', requestURL);
request.setRequestHeader("content-type", "application/x-www-form-urlencoded");
request.send(requestparam);
request.onload = () => {
if (request.status === 200){
console.log("Load devices response");
var response = request.response;
window.localStorage.setItem('devicesresponse', response);
this.devices = this.parseDevices(response);
console.log("Load devices complete");
}
else if (request.status === 401){
alert("Unauthorized");
}
else {
alert("Unexpected error");
}
}
}
// Function to parse JSON string into array of customers
parseCustomers(customersjson: string)
{
let customerarray = JSON.parse(customersjson);
let customers: Customer[] = [];
for (let i = 0; i < customerarray.length; i++) {
let customer: Customer = new Customer();
customer.setId(customerarray[i]['id']);
customer.setName(customerarray[i]['name']);
customer.setPlace(customerarray[i]['place']);
customer.setStreet(customerarray[i]['street']);
customers[i] = customer;
}
return customers;
}
// Function to parse JSON string into array of devices
parseDevices(devicesjson: string)
{
let devicearray = JSON.parse(devicesjson);
let devices: Device[] = [];
for (let i = 0; i < devicearray.length; i++) {
let device = new Device();
device.setId(devicearray[i]['device_id']);
device.setSerialnumber(devicearray[i]['serial_number']);
device.setDescription(devicearray[i]['description']);
device.setLocation(devicearray[i]['location']);
devices[i] = device;
}
return devices;
}
}