0

I am completely new to Javascript but do have some experience in other languages (Java, Python, Swift) however it has been a while so I am not sure if I am misremembering some concepts or trying to apply concepts from other languages that don't work in JS.

Anyway, I want to create an instance of an object Booking from the data response from an API call.

This is what I have so far, so I have the booking object.

function Booking(id, retailer_id, app_date) {
  this.id = id;
  this.retailer_id = retailer_id;
  this.app_date = app_date;
}

And I have my function that I can call getBooking(id)

function getBooking(booking_id) {
    
 let request = new XMLHttpRequest();

 let url = prefix.toString() + 'bookings/' + booking_id;

 request.open('GET', url, true)

 request.onload = function() {

   let data = JSON.parse(this.response)

   if (request.status >= 200 && request.status < 400) {
    
     return new Booking(data.id, data.retailer_id, data.app_date);
   }
 }

 request.send();
 console.log("Request sent.");
}

What I don't understand is why I can't just do :

let button = document.getElementById('button');
button.addEventListener('click', function() {
 const booking = getBooking('1');
 console.log(booking.id)
});

I've tried so many different things, I've tried declaring a variable as the object Booking() then overwriting with the output of the getBooking() function.

The only thing that worked is when i declared a public var

var booking = new Booking();

Then updated that variable inside the getBooking function.

But I don't want to have a static variable, I want to be able to create new instances of Booking object so that I can store the details retrieved from the API.

Joshua Munn
  • 39
  • 1
  • 8
  • 2
    This exact question is asked dozens of times a day on Stackoverflow [How to return values from async functions using async-await from function?](https://stackoverflow.com/questions/49938266/how-to-return-values-from-async-functions-using-async-await-from-function) – Andy Ray Feb 25 '23 at 19:59
  • Have a look at https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch instead and learn how to work with async functions. – Felix Kling Feb 25 '23 at 20:00
  • Here's two exact duplicates of this question from the last 12 hours: https://stackoverflow.com/questions/75563556/how-to-make-javascript-wait-for-all-images-to-load-before-proceeding#comment133315859_75563556 and https://stackoverflow.com/questions/75563660/why-it-gives-a-broken-image-when-fetching#comment133315857_75563660 – Andy Ray Feb 25 '23 at 20:00
  • I didn’t realise it was the asynchronous request part being the cause of the issue rather than my misunderstanding of JS objects - hence why I never found any of these duplicated questions. – Joshua Munn Feb 25 '23 at 23:13

1 Answers1

1

It is because doing an http request is an asynchronous operation. What this means is that the line that executes the request doesn't block the thread, and the code continues to run inmediately. By passing a callback function to the request's onload property, you are ensuring that when the asynchronous request completes, something is done to its returned data. This can be a bit difficult to wrap your head around and can lead to what we call "callback hell". To avoid and have more readable code, use async/wait: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

tutiplain
  • 1,427
  • 4
  • 19
  • 37