title: HTTP request efficiency Angular 4+
body: <p>I have a very broad, but simple question regarding http requests via Angular. I have an Ionic app using Angular http requests, but I'm not sure if I'm making the most out of what Angular has to offer for speed and efficiency. My current code for my POST request:</p>
  
  <p>page sending data .ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//calls provider function  
  this.stemAPI.submitBOLData(this.submitAllData,this.reap.token).then((result) =&gt;{
     //API response handled here               
        }, (err) =&gt; {
            //Error handled here 
          });</code></pre>
  </div>
  </div>
  </p>
  
  <p>provider .ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { HttpClient,HttpHeaders } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  // import { Observable } from 'rxjs/Observable';
  // import { interval } from 'rxjs/observable/interval';
  // import { of } from 'rxjs/observable/of';
  // import { _throw } from 'rxjs/observable/throw';
  // import { mergeMap, retry } from 'rxjs/operators';
  import { retry } from 'rxjs/operators';
  
  @Injectable()
    constructor(public http: HttpClient) {}
    export class StemApiProvider {
    //POST form submitBOL
      submitBOLData(data,authToken){
        //console.log(data);
        const httpOptions = {
            headers: new HttpHeaders({
                'Accept': 'application/json, text/plain',
                'Content-Type':  'application/json',
                'Authorization': authToken
              })
    };
     return new Promise((resolve, reject) =&gt; {
       this.http.post(this.apisubmitbolUrl, JSON.stringify(data), httpOptions)
       .subscribe(res=&gt;  {
         resolve(res);
       }, (err) =&gt; {
         reject(err);
       });
     });
    }
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The call works fine, but I know there is more efficiency that can be added. Also, I know the rxjs package offers functionality like "retry" if the call fails, but I'm not sure how exactly that can be implemented. </p>
  
  <p>The biggest reason for this question is because my clients will potentially be using the app in areas where there isn't the best cellular connection so the API calls will potentially take longer and I if the connection happens to break I want to know what tools I can utilize to give user other options. </p>
  
  <p>Edit: package.json </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
    "name": "Test Project",
    "version": "0.6.0",
    "author": "",
    "homepage": "",
    "private": true,
    "scripts": {
      "clean": "ionic-app-scripts clean",
      "build": "ionic-app-scripts build",
      "lint": "ionic-app-scripts lint",
      "ionic:build": "ionic-app-scripts build",
      "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
      "@angular/animations": "5.2.10",
      "@angular/common": "5.2.10",
      "@angular/compiler": "5.2.10",
      "@angular/compiler-cli": "5.2.10",
      "@angular/core": "5.2.10",
      "@angular/forms": "5.2.10",
      "@angular/http": "5.2.10",
      "@angular/platform-browser": "5.2.10",
      "@angular/platform-browser-dynamic": "5.2.10",
      "@ionic-native/app-version": "^4.15.0",
      "@ionic-native/camera": "^4.15.0",
      "@ionic-native/core": "4.11.0",
      "@ionic-native/device": "^4.15.0",
      "@ionic-native/file": "^4.15.0",
      "@ionic-native/file-transfer": "^4.15.0",
      "@ionic-native/geolocation": "^4.15.0",
      "@ionic-native/ionic-webview": "^5.0.0-beta.21",
      "@ionic-native/network": "^4.15.0",
      "@ionic-native/splash-screen": "4.7.0",
      "@ionic-native/status-bar": "4.7.0",
      "@ionic/pro": "^2.0.3",
      "@ionic/storage": "^2.2.0",
      "angular2-signaturepad": "^2.8.0",
      "cordova-android": "7.1.1",
      "cordova-browser": "5.0.3",
      "cordova-ios": "4.5.5",
      "cordova-plugin-app-version": "^0.1.9",
      "cordova-plugin-camera": "^4.0.3",
      "cordova-plugin-device": "^2.0.2",
      "cordova-plugin-file": "6.0.1",
      "cordova-plugin-file-transfer": "1.7.1",
      "cordova-plugin-geolocation": "^4.0.1",
      "cordova-plugin-ionic": "5.2.5",
      "cordova-plugin-ionic-keyboard": "^2.1.3",
      "cordova-plugin-ionic-webview": "^2.2.0",
      "cordova-plugin-network-information": "^2.0.1",
      "cordova-plugin-splashscreen": "^5.0.2",
      "cordova-plugin-webview": "0.0.1",
      "cordova-plugin-whitelist": "^1.3.3",
      "cordova-sqlite-storage": "2.4.0",
      "ionic-angular": "^3.9.2",
      "ionic-select-searchable": "^2.10.0",
      "ionic-selectable": "^3.0.3",
      "ionicons": "3.0.0",
      "rxjs": "5.5.11",
      "sw-toolbox": "3.6.0",
      "ts-md5": "^1.2.4",
      "ws": "^3.3.3",
      "zone.js": "0.8.26"
    },
    "devDependencies": {
      "@ionic/app-scripts": "3.2.0",
      "typescript": "~2.6.2"
    },
    "description": "An Ionic project",
    "cordova": {
      "plugins": {
        "cordova-plugin-geolocation": {
          "GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
        },
        "cordova-plugin-device": {},
        "cordova-plugin-app-version": {},
        "cordova-plugin-camera": {},
        "cordova-plugin-whitelist": {},
        "cordova-plugin-splashscreen": {},
        "cordova-plugin-ionic-keyboard": {},
        "cordova-plugin-network-information": {},
        "cordova-sqlite-storage": {},
        "cordova-plugin-ionic-webview": {
          "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
        },
        "cordova-plugin-ionic": {
          "APP_ID": "",
          "CHANNEL_NAME": "Master",
          "UPDATE_METHOD": "background",
          "UPDATE_API": "https://api.ionicjs.com",
          "MAX_STORE": "2",
          "MIN_BACKGROUND_DURATION": "30"
        }
      },
      "platforms": [
        "browser",
        "ios",
        "android"
      ]
    }
  }</code></pre>
  </div>
  </div>
  </p>