I have a function which is as follow.
public getAssemblyTree(id: number) {
....
const request = from(fetch(targetUrl.toString(), { headers: { 'responseType': 'json' }, method: 'GET' }));
request.subscribe(
(response) => {
response.json().then(data => {
assemblyNodesForTree.push(...this.parseAssemblyTree(data['flat_assembly_graph']));
}
)
}
)
console.log(assemblyNodesForTree)
return assemblyNodesForTree;
}
I realised that the function is returning assemblyNodesForTree without the observable completing. I was wondering what may be the right way to go about this?
CodePudding user response:
You're thinking of an asynchronous
operation to work in a synchronous
way.
Also refers to question Problem returning value from RxJS Observable. It explains kind of similar usecase.
Quick Suggestion:- use
fromFetch
instead offrom(fetch)
Why fromFetch
? - because it internally uses the fetch
API, and completes the observable after API call is finished.
You're subscribing inside the getAssemblyTree
function, which is going to be called in a while once ajax is finished. And before that you just return rather you should return assemblyNodesForTree
varaible. That will be empty always.
To deal with async nature, you can pipe your observable, and do the relevant operation inside map
operator function. At the end return Promise
/Observable
from the getAssemblyTree
function.
public getAssemblyTree(id: number) {
....
const request = fromFetch({
url: targetUrl.toString(),
headers: { 'responseType': 'json' }, method: 'GET'
}).pipe(
map(async (response) => {
const assemblyNodesForTree = [];
const data = await response.json()
assemblyNodesForTree.push(
...this.parseAssemblyTree(data['flat_assembly_graph'])
);
return assemblyNodesForTree;
})
);
return request;
}
Usage
async myFunction() {
const assemblyNodesForTree = await lastValueFrom(getAssemblyTree(id))
}
Usage of this function is going to be pretty simple, call getAssemblyTree(id)
function wrapper with the lastValueFrom
(). And as soon as fromFetch
API call finishes it will resolve the promise.