This is far and away the most common problem I encountered when I was new to reactive programming, and it’s hard to explain fully in terms that make sense then.
So, while you wait for better answers, I’m going to describe some rules that I’d like you to consider following, that borrow from the world of functional programming.
First, check out this post for some terminology. Once you write this.storage.get, there should be no other statements at that level. That has to be it. You can (and should, if you care about returning anything out of here, which it sounds like you do) put a return before this.storage.get. That, incidentally, is the only way that you should be attempting to affect anything external. Which means that this line: this.articlepanier.splice(index, 0, article); has to go. No modifying external state from inside here.
It sounds like you are trying to build an array of Articles. I would make Article an interface instead of a class, but that’s another discussion. You cannot return an Article[] out of here, period. You can return a Promise<Article[]>, you can return an Observable<Article[]>, but you cannot return an Article[]. The way you have it now is fundamentally relying on the ability to return a synchronous result from an asynchronous function.
So rewrite everything you have here with the following constraints:
- break it down into as many functions as you like, but the first word of each must be
return - declare return value types for each function - no
anywhatsoever - do not reference
thisin any of them, except for immutable helper objects that are injected in the constructor - all variable data needed must be explicitly passed to the function