return promise after multiple then is returning undefined

Question

i have a method that calls a service that performs a axios get request. This returns a promise.I then call .then and return the response. when i call loadData i get a promise returned.

loadData(){
      return myService.getData().then(response=>{              
            //do some stuff
                return response;                  
        })
   }

when i call

Promise.all([loadData()]).then(function([data]){
  console.log([data])
}

the console.log shows my data that i have loaded via the service.

if i change my loadData method to the following - then after the Promise.all logs to the console i get undefined.

loadData(){
      return myService.getData().then(response=>{              
            //do some stuff                                      
        }).then(res =>{
            //do more stuff
            return res;
        }
   }

Can anyone tell me what i am doing wrong;

Answer 1

The return value of a fulfillment handler is the input to (or promise of input to) the next fulfillment handler. From your description, you're not returning anything where you have //do some stuff:

loadData(){
    return myService.getData().then(response=>{              
        //do some stuff
        return /*something appropriate*/;     // <=========================== 
    }).then(res =>{                           // <=== it will come through here
        //do more stuff
        return res;
    }); // <========== Added missing ); here
}

Calling a function that doesn't return anything results in undefined, so that's why res is undefined.

Side note: You don't need two fulfillment handlers (then handlers) unless what you're returning in the first one is a promise (or other thenable).