CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2
J0nathan Lam
J0nathan Lam

Reputation: 151

Ionic 2 Promise - Finishing the first process before executing the second process

For my Ionic 2 project, I have two functions executing one after another. Each function consists of an API call. I want to wait until the first function finishes executing everything before going to the second function.

The issue I'm having is that since the first function takes some time to finish, the second function executes before the first function finishes executing.

I'm learning how to use Promise as I was told it can solve this issue. I've simplified the code so it's easier to follow:

const first = () => {
  self.pspService.post('/api/Conversation/GetPersonalCalendarData',
    {
    }, result => {
      result.Data.forEach(lAppointment => {
      });
    });

  return new Promise((resolve, reject) => {
    resolve();
  });

};

const second = () => {
  self.pspService.post('/api/Conversation/AddPersonalAppointment', {
  }, result => {

  });

  return new Promise((resolve, reject) => {
    resolve();
  });
};

first().then(() => {
  return second();
});

Upvotes: 0

Views: 971

Answers (3)

Prerak Tiwari
Prerak Tiwari

Reputation: 3466

You can use async/await to handle exactly such scenarios.Asynchronous functions are prefixed with the async keyword; await suspends the execution until an asynchronous function return promise is fulfilled and unwraps the value from the Promise returned. 

async func(){
    const first = () => {
      self.pspService.post('/api/Conversation/GetPersonalCalendarData',
        {
        }, result => {
          result.Data.forEach(lAppointment => {
          });
        });

      return new Promise((resolve, reject) => {
        resolve();
      });

    };

    const second = () => {
      self.pspService.post('/api/Conversation/AddPersonalAppointment', {
      }, result => {

      });

      return new Promise((resolve, reject) => {
        resolve();
      });
    };

    let firstValue = await first();
    console.log("First Value", firstValue);
    let secondValue = await second();
    console.log("Second Value", secondValue);
  }

Upvotes: 0

Wayrex
Wayrex

Reputation: 2107

You could wrap your post inside the new Promise:

const first = () => {
    return new Promise((resolve, reject) => {
        self.pspService.post('/api/Conversation/GetPersonalCalendarData', {
            }, result => {
                result.Data.forEach(lAppointment => {});
                resolve();
            });
    });

};

const second = () => {
return new Promise((resolve, reject) => {
    self.pspService.post('/api/Conversation/AddPersonalAppointment', {
        }, result => {
            resolve();
        });
});
};

first().then(() => {
     return second();
});

Or return directly the promise generated by the POST

const first = () => {
    return self.pspService.post('url, {}, result => {
            result.Data.forEach(lAppointment => {});
            return Promise.resolve(result);
        })
}

Upvotes: 1

Eliseo
Eliseo

Reputation: 57939

Use the new HttpClient and switchMap to get a unique Observable

firstAndSecond(){
    return self.pspService.post('/api/Conversation/GetPersonalCalendarData')
          .switchMap((data:any)=>{
            //there you have "data", you can use to change the post
            return self.pspService.post('/api/Conversation/AddPersonalAppointment')
           });
}
//In your component
myService.firstAndSecond().subscribe((data2)=>{
    //data2 it's only the data from self.pspService.post
}

Upvotes: 0

Related Questions