Observable subscribe timing issue

Question

I have a service in my component, this service has a method that returns a string value from the server.

Service:

getOrderBarcode(): Observable<string> {
    return this.http.get(this.baseUrl + 'barcode/getbarcode')
        // .map(this.extractData);
        .map(res => res as string )
}

Component:

let barcodeService = this.barcodeService.getOrderBarcode();
debugger;
barcodeService.subscribe(result => order.OrderBarcode = result);
console.log(order.OrderBarcode);
// rest of the logic

However, when the .subscribe is called it is not binding the value at this point, after debugging I found that it applies the value after executing everything in the class, how can I get around this issue?

UPDATE based on the comments and link to another question

Service method:

getSomething(callback: (data) => void) {
    debugger;
    return this.http.get(this.baseUrl + 'barcode/getbarcode')
        // .timeout(1000)
        // .map(this.extractData);
        .map(res => res as string)
}

Component:

let a = this.barcodeService.getSomething((data) => {
    debugger;
    console.log(data);
});

This debugger does not get hit...

That's *exactly what's supposed to happen*. The whole reason you're subscribing and using observables is that **the process is asynchronous**. — jonrsharpe, Sep 13 '17 at 22:09
Possible duplicate of [Angular 2 - Return data directly from an Observable](https://stackoverflow.com/questions/37867020/angular-2-return-data-directly-from-an-observable) — jonrsharpe, Sep 13 '17 at 22:10
okay thanks for pointing me in the right direction, if i am returning a single value and not a stream, is it a case where i can use a promise here instead? — Harry, Sep 13 '17 at 22:18
Other than it perhaps being a more familiar pattern to you, what do you hope to gain from using promises that can't be done with observables? — Nicholas Tower, Sep 13 '17 at 22:19
I wouldn't recommend mixing the two, stick with one async paradigm as far as possible. RxJS is built right into Angular, so unless you've a whole bunch of promise-y stuff to interact with I'd lean into observables. — jonrsharpe, Sep 13 '17 at 22:20
that is a fair point, just trying to understand, if there is ever a case where promise could be used over an observable — Harry, Sep 13 '17 at 22:20
in the example, the op is returning a value from a service, within an existing service, it is kind of confusing me a little bit. I am trying to do this with a single service, however I cannot get it to work — Harry, Sep 13 '17 at 22:59
You never `.subscribe` to the observable... Also you clearly never actually use that callback in the method it's passed to; your IDE may already be telling you that. — jonrsharpe, Sep 13 '17 at 23:08
the IDE is not throwing any errors, i do not understand where to do the subscribe in the component or the service? — Harry, Sep 13 '17 at 23:10
That depends what functionality you need. In this case, if you need the returned value in the component, that's where you subscribe. JetBrains IDEs show redundant, unused parameters in grey with a squiggly underline, for example. — jonrsharpe, Sep 13 '17 at 23:13
I am using Visual Studio Code, however, I subsrcibed in the component, and still did not get the returned value — Harry, Sep 14 '17 at 13:33

score -1 · Answer 1 · answered Sep 14 '17 at 00:19

-1

Your sample code

barcodeService.subscribe(result => order.OrderBarcode = result);
console.log(order.OrderBarcode);

Fix

Use toPromise and await the result (or use then).

More: https://www.learnrxjs.io/operators/utility/topromise.html

answered Sep 14 '17 at 00:19

basarat

261,912
58
460
511

why would somebody convert an observable to promise just for debugging? Thats just overhead. The do operator is meant for this – Jota.Toledo Sep 14 '17 at 11:22
thanks, I did wonder about this however I would sceond that opinion as mention above. Could you expand a little? – Harry Sep 14 '17 at 13:32

Observable subscribe timing issue

1 Answers1

Fix