Promise returning Subscription, how to wait for data before proceding

Ionic Framework ionic-v3
1

I have a function that get some data from DB, store in localStorage and then do something with it. To get the data I’m using the Angular’s HttpClient, which uses Observables in its methods. The problem I’m facing is that when processData() is fired, the localStorage was not populated yet.

Here is how I’m doing the coding so far:

mainFunction(): Promise<void> {
	return this.getData().then(() => {
  		return this.processData().then(() => {
  			//...
  		})
  	})
}

// Get data from DB and then store in localStorage
getData(): Promise<Subscription> {
	// Declare some data to send
	//...

	return this.http.post(myLink, myArray, httpOptions)
	.subscribe(res => {
		// Store retrieved data in localStorage
		return this.storeData(res);
	});
}

I can’t just get the data from getData() and pass to processData, for some other reasons I need to update the localStorage before proceed. I believe this situation is happening because I’m returning a Subscription to processData() and not the updated localStorage data, which is my objective. I tried to do this in some ways, as stated here using map(), but this generate some other errors. Is there other method that I can use to acomplish what I want?

2

I don’t understand your Question. So basically you want to load Data from a DB, update something in the Storage and then continue with the Methode this.processData?

3

Yes, when the storage is populated with the data I want to proceed to processData(). The problem is that this function is being fired before that.

4

You should rethink your Code maybe, for Example like this:

// Get data from DB and then store in localStorage
getData(): Promise<void> {
	// Declare some data to send
	//...

      return new Promise((resolve, reject) => {
	    this.http.post(myLink, myArray, httpOptions)
	    .subscribe(async res => {
		// Store retrieved data in localStorage
		await this.storeData(res);
                resolve();
	    }, () => {
                reject();
        }
      });
   };
}

(Maybe some Comma Errors, as i write this from my smartphone)

This returns a Promise<void>instead of Promise<Subscription> and resolves only after the this.storeData Method is finished (using async await)

5

Thank you very much for your reply, but I manage to work using .toPromise() method. Got the ideia from here. Definitely I have to rethink these codes, I’m rewriting some of the first functions I made in this app, there are some very noob things in there. This is a nice solution you presented, although I don’t like to use async/await so much.

Here is how I did it:

mainFunction(): Promise<void> {
	return this.getData().then(() => {
  		return this.processData().then(() => {
  			//...
  		})
  	})
}

// Get data from DB and then store in localStorage
getData(): Promise<void> {
	return this.requestData(res => {
            return this.storeData(res);
        });
}

requestData(): Promise<Object> {
        // Declare some data to send
	//...

	return this.http.post(myLink, myArray, httpOptions)
        .toPromise();
}