Superagent & Fetch returning promises -- How to handlle these?

Question

Forgive me for this question which is likely to be an easy solve for a more experienced JS programmer. I've been reading up on superagent and fetch, trying to get REST calls working. (I was able to get odata working correctly but I now need REST). However, I'm getting confused on promises. I'm currently trying to make a simple request.get (or fetch.get) with the following code:

this.ticketList = Request.get(url).then((response) => {
    return response.body.Tickets;
});
console.log(this.ticketList); // Returns a promise..?

I'm not familiar with promises and don't know how to handle this. All the documentation I've read says async calls are a good thing, but my application is linear and requires data from the previous call before continuing. I don't need a promise, I need the full response. (Please correct me if my limited understanding of promises/ajax is wrong!)

How can I change the above code to give me the response object I want? (JSON preferred) Or, how do I handle a promise to get the data I need?

Thanks, Charlie

Answer 1

Basically, with promises, you deal with this by chaining thens together.

Request.get(url)
       .then((response) => {
           return response.body.Tickets;
        })
       .then((ticketList) => {
           console.log(ticketList);
        });

In this specific case there's really not a benefit to breaking this up into two thens instead of just working with response.body.Tickets directly. Typically you'd do everything here until the next point you needed to make an async call, and then you'd get a new promise. For example:

Request.get(url)
       .then((response) => {
           var ticketList = response.body.Tickets;
           console.log(ticketList);
           return Request.get(url2);
        })
       .then((response2) => {
           /* ... */
        });

Essentially, if you have a linear set of operations, as soon as you make your first async call, everything following that call happens inside a callback provided in a then statement (or a catch statement to handle a rejected promise).

Answer 2

You need to wrap your call requiring the data in the then statement. Unfortunately most HTTP requests are async and there isn't much you can do without some serious tinkering (and it's not worth it).

If you must have the value in your promise returned to another function you're better off returning the promise itself and handling it there once it has resolved.

An example based on the code you've given:

function shareTickets() {
  // Get the promise to resolve
  var getTicketPromise = getTickets();

  // Resolve the promise and handle as needed
  getTicketPromise
    .then((ticketData) => {
      console.log('I got the data from the promise: ' + ticketData);
      doSomethingWithData(ticketData);
    })
    // If an error happens, you can catch it here
    .catch((error) => console.log(error));
}

// Return the promise itself so it can be resolved in the other function.
function getTicketPromise() {

  // Just return the promise
  return Request.get(url);
}

It's a bit of a pain when you learn how to deal with promises at first but they pay off is huge. Just keep practising for a while and eventually you get the hang of it.