asynchronous typescript to synchronous typescript

Question

postPersonalDetails(pdData){
let options : RequestOptionsArgs;
let token:string;
let id:string;
this.getToken().then((val) => {
  token = val;
  console.log("I am in token func"+token);
});
this.storage.get('userID').then((val) => {
  id = val;
  console.log(val);
});
console.log("I amhere"+token+id);

I am getting the data in 1st consoleLog and 2nd Consolelog

Because of the asynchronous nature 3rd console log is printing first there by I am getting token is undefined and user ID is undefined What is the right way of doing this?

I am using Ionic3/Angular 4/ typescript. I am getting compile error with async/await — vivek
– vivek, Commented Aug 13, 2017 at 17:57
@vivek youtube.com/watch?v=s6SH72uAn3Q - Promise all example appears around 12:14.. .There's a JsFiddle for part of the code a bit before that.. jsfiddle.net/jspatel/mkjh2ev5 — JGFMK
– JGFMK, Commented Aug 13, 2017 at 20:21

PerfectPixel · Accepted Answer · 2017-08-13 18:07:01Z

3

The angular setup comes with core-js and a polyfill for Promise. You can combine your promises with Promise.all (see MDN with a detailed method explanation) and then proceed once both promises are resolved.

Promise.all([
  promise1, promise2, ...
])

Keep in mind that Promise.all rejects if one of the combined promises is rejected.

answered Aug 13, 2017 at 18:07

PerfectPixel

1,9881 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shaun Luttin · Accepted Answer · 2017-08-14 01:15:32Z

0

Here are some more details on what PerfectPixel proposed.

const promise1 = this.getToken().then((val) => {
  console.log("I am in token func"+val);
  return val;
});

const promise2 = this.storage.get('userID').then((val) => {
  console.log(val);
  return val;
});

Promise
  .all([promise1, promise2])
  .then((results) => {
    const [ token, id ] = results;
    console.log("I am here"+token+id);
  });
}

Here is a more general example of it working. (See Bergi's comments for more detail on side-effects.)

const promise1 = Promise.resolve("the-token").then((val) => {
  console.log("I am in token func: " + val);
  return val;
});

const promise2 = Promise.resolve("the-userID").then((val) => {
  console.log("I am in id func: " + val);
  return val;
});

Promise.all([promise1, promise2]).then((results) => {
  const [ token, id ] = results;
  console.log("I am here: " + token + " " + id);
});

edited Aug 14, 2017 at 1:15

answered Aug 14, 2017 at 0:33

Shaun Luttin

143k93 gold badges442 silver badges495 bronze badges

5 Comments

Bergi Over a year ago

Don't use those global variables. Please.

Shaun Luttin Over a year ago

@Bergi Good point. Is the edit to the answer sufficient to allay the concern?

Bergi Over a year ago

No. They're still free variables (in the callback where they are used) initialised at arbitrary points. Don't use variables at all - use the promise result values!

Bergi Over a year ago

Yes, the second edit did it. Now just remove the horrible version from your answer completely - the OP never intended to do this.

Shaun Luttin Over a year ago

@downvoter Could you please provide more information about your downvote or suggest improvements. I would appreciate that.

Collectives™ on Stack Overflow

asynchronous typescript to synchronous typescript

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related