Ionic 2 Http post

Ionic Framework ionic-v3
1

I have been looking around how could I make my code wait for the http request before move on, the reason that I need it is because I’m using the response to fill some variables in the html.

So,

Question 1: Do I really need to create a Service to make a http request and return a Promise/Observable?

Question 2: This is my code, couldn’t I just do something here to make the code wait for the response?

let link = 'http://working url';
  let headers = new Headers({
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': '*/*'
  });

  let options = new RequestOptions({headers: headers});

  this.http
      .post(link, this.loginString, options)
      .map(res => res.json())
      .subscribe(
          data => {
              let response = JSON.parse(data);
              if(response.Successfull){
                  if(response.ReturnObject.length>0){
                      this.orders = this.orderJson(response.ReturnObject);
                      this.ordersWithoutGroup = response.ReturnObject;
                      this.empty = false;

                  }else{
                      this.orders= [];
                      this.empty= true;
                  }
              }

      }, err => {
          this.showAlertError();
      }, () => {
          this.loadingPopup.dismiss()

      });
}

The is my HTML (It’s in migration process from Ionic to Ionic 2):

  <ion-content class="stable-bg" scroll="true">
    <div class="item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="text" placeholder="Search Orders" ng-model="search">
        </label>
    </div>
    <ion-list ng-repeat="(date, group) in orders">
        <ion-item class="item-divider">{{ date }}</ion-item>
        <ion-item class="item-icon-left item-icon-right" ng-repeat="order in group" (click)="goToDetail(order.ID)">
            <div ng-show="order.DocumentNumber.indexOf(search) >-1 || !search ">
                <i class="icon ion-card"></i>
                <div>Nº {{ order.DocumentNumber }}
                    <span class="gray pull-right">{{ order.time }}</span>
                </div>
                <i class="icon ion-ios-arrow-right"></i>
            </div>
        </ion-item>
    </ion-list>
    <div ng-show="empty">
        <div class="card">
            <div class="item item-text-wrap ion-information-circled" (click)="check()">At the moment there isn't any order to approve.</div>
        </div>
    </div>
</ion-content>

Thank you in advance for the help.

2

I guess not, but I find it better for separation of responsibility to do so. Say I want to add caching at some point; I don’t want to slog through a bunch of components that are inadvertently bypassing the cache by hitting the network directly. Ditto for authentication.

This is less of a “couldn’t” than a “shouldn’t” situation. Seed all variables that are referenced by the template (such as orders) with viable dummy values (like []) in the constructor. If you don’t like having the user temporarily see the page in its blank state, look into LoadingController.

You will get incredibly frustrated working with Angular/Ionic 2 if you can’t let go of an imperative programming mindset where you are trying to orchestrate code execution sequence from the top down. The framework is not designed to accommodate that; it wants you to think reactively, where many different threads can execute at different times and you have to say what you want to happen in response to what events.