wait for Http response in angular 2

Question

I am using HTTP request in angular 2. I want when I get HTTP response then next process is called.

Example: In a form select option values are coming from HTTP get Request.I want to form page is loading until I get response for select options.

get function

getSelectOptionValue(): any {
      let area_list_url = '/select_option_list/';

      this.urlGet(area_list_url).subscribe(
        (response) => {
          let data = response.text() ? response.json() : [{}];
          if (data) {
            Constant.areaList = data;
          }
        }
      );
    }
    return JSON.stringify(Constant.areaList);
  }

GET function

 urlGet(url: string) {

    return this._http.get(Constant.hostUrl + url, {headers: GlobalUtils.head})
      .map((res)=> {
        if (res.status === 200) {
          console.log(res);
          return res;
        } else if (res.status = 201) {
          return res;
        }
      }).catch((error)=> {
        console.log(error);

        if (error.status === 400) {
          return Observable.throw(new Error(error.status));
        } else if (error.status === 401) {
          return Observable.throw(new Error(error.status));
        } else if (error.status === 403) {
          return Observable.throw(new Error(error.status));
        } else if (error.status === 404) {
          return Observable.throw(new Error(error.status));
        } else if (error.status === 420) {
          return Observable.throw(new Error(error.status));
        } else {
          return Observable.throw(new Error(error.status));
        }
      });
  }

just call the function / next process from subscribe?

smnbbrv
– smnbbrv

2016-10-18 08:15:29 +00:00
Commented Oct 18, 2016 at 8:15 — smnbbrv
– smnbbrv, Commented Oct 18, 2016 at 8:15

HDJEMAI · Accepted Answer · 2020-06-14 16:21:54Z

12

You can't make code wait for async calls to return.

What you can do is to chain async calls, so that when an async call returns, some of your code is executed.

If you use map() instead of subscribe() you can return the created Observable for the caller to subscribe. If you call subscribe() the return value will be a Subscription but that is usually not very useful for the caller:

getSelectOptionValue(): any {
      let area_list_url = '/select_option_list/';

      return this.urlGet(area_list_url).map( /// <<<=== use `map` here
        (response) => {
          let data = response.text() ? response.json() : [{}];

          if (data) {
            Constant.areaList = data;
          }

          return JSON.stringify(Constant.areaList);
        }
      );
    }
}

And then use it like:

this.getSelectOptionValue().subscribe(data => {/* your code that works with received data here */ });

edited Jun 14, 2020 at 16:21

HDJEMAI

9,85048 gold badges78 silver badges99 bronze badges

answered Oct 18, 2016 at 8:15

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rahul dev Over a year ago

I exactly use map in get function and subscribe in getSelectOptionValue()

Rahul dev Over a year ago

and your answer through me error: Cannot read property 'subscribe' of undefined when I again use map in getSelectOptionValue().

Günter Zöchbauer Over a year ago

Sorry, I didn't mention the return I added where I changed subscribe to map. If you add return there, it should work.

Collectives™ on Stack Overflow

wait for Http response in angular 2

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related