Getting JS promise to return a value

Question

I have been looking thru many excellent online examples of getting a Promise to return a value in the .then(). However, there must be something different in my example that is blocking it. I am using nativescript-vue if that makes a difference, but really I think this is a Javascript question.

I have calling vue file:

 var person;
 personService.retrievePerson(this.id).then(function(val) {
     console.log("===> received val: " + val); 
    person = val;
}).catch(function(err) {
    console.err(err);
     let message = "Unable to find matching person for id. Please try again.";
     alert(message)
         .then(() => {
             console.log(message);
         });
});

Then in my PersonService.js:

retrievePerson(id) {
       new Promise(resolve => {

           httpModule.request({
                url: PersonAPI,
                headers: headers,
                method: "GET"
            }).then((response) => {
                // resolve();
                let status = response.statusCode;
                if (status === 200) {
                    let content = JSON.parse(response.content);
                    Person = JSON.parse(response.content);
                    console.log("===> returned [200] PersonService.retrievePerson() response: \"" +  JSON.stringify(Person) + "\"")
                } else if (status === 404) {
                    console.log("===> returned [404] ... returning null ");
                }
                // resolve();
            }).then(() => {
                console.log("===> PersonService.retrievePerson().then() has Person : " + JSON.stringify(Person));
                resolve(Person);
            }).catch((err) => {
                console.error("retrievePerson() caught error: " + JSON.stringify(err));
            });
        });
        }

In my console logs I can see the ===> returned [200] PersonService.retrievePerson() person JSON output, but the calling console "===> received val" is not shown. But I don't know how to get that data back to the calling class to use.

Thank you for your time, I hope you can point out what I am doing wrong here.

Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! — Bergi, Apr 05 '20 at 15:15

score 2 · Accepted Answer · answered Apr 05 '20 at 15:04

you need to return the promise in your retrievePerson function:

retrievePerson(id) {
       return new Promise(resolve => {

           httpModule.request({
                url: PersonAPI,
                headers: headers,
                method: "GET"
            }).then((response) => {
                // resolve();
                let status = response.statusCode;
                if (status === 200) {
                    let content = JSON.parse(response.content);
                    Person = JSON.parse(response.content);
                    console.log("===> returned [200] PersonService.retrievePerson() response: \"" +  JSON.stringify(Person) + "\"")
                } else if (status === 404) {
                    console.log("===> returned [404] ... returning null ");
                }
                // resolve();
            }).then(() => {
                console.log("===> PersonService.retrievePerson().then() has Person : " + JSON.stringify(Person));
                resolve(Person);
            }).catch((err) => {
                console.error("retrievePerson() caught error: " + JSON.stringify(err));
            });
        });
        }

is it possible to await for that Promise to resolve before moving forward in my calling class? — sonoerin, Apr 05 '20 at 15:37
yes instead of doing `retrievePerson(id).then((person)=>{})` you can await it as such: `let person = retrievePerson(id)` but make sure the function you are calling it in is `async`. you can read up more on Async Await here: https://javascript.info/async-await — michmich112, Apr 05 '20 at 16:04

score 1 · Answer 2 · answered Apr 05 '20 at 15:17

You definitely need to return the promise in your retrievePerson function. However it can also be cleaned up a lot.

You don't need the wrapping promise as you can just return the original one. You shouldn't need the double set of .thens as well as you need to make sure you re-throw the error in the .catch so your vue file will get a chance to catch the error rather than never resolve as it used to. I'd recommend switching from using Person to const person in case you run this function twice at the same time there could be a race condition as you change variable asynchronously.

I'd also like to point out one more potential issue: you aren't using the id in your request that I assume based on the console logs is supposed to be used.

function retrievePerson(id) {
  return httpModule
    .request({
      url: PersonAPI,
      headers: headers,
      method: 'GET',
    })
    .then((response) => {
      let status = response.statusCode;
      if (status === 200) {
        Person = JSON.parse(response.content);
        console.log(
          '===> returned [200] PersonService.retrievePerson() response: "' +
            JSON.stringify(Person) +
            '"'
        );
        return Person;
      } else if (status === 404) {
        console.log('===> returned [404] ... returning null ');
        return null;
      }
    })
    .catch((err) => {
      console.error('retrievePerson() caught error: ' + JSON.stringify(err));
      throw err;
    });
}

Thank you, I appreciate the clean code suggestion. My id was actually used to build the URL but not shown for clarify. — sonoerin, Apr 05 '20 at 15:22

Getting JS promise to return a value

2 Answers2

Linked