Эффективность HTTP-запроса Angular 4+

Question

У меня очень широкий, но простой вопрос, касающийся http-запросов через Angular.У меня есть приложение Ionic, использующее Angular http-запросы, но я не уверен, что смогу максимально использовать то, что Angular предлагает для скорости и эффективности.Мой текущий код для моего POST-запроса:

страница отправки данных .ts:

//calls provider function  
this.stemAPI.submitBOLData(this.submitAllData,this.reap.token).then((result) =>{
   //API response handled here               
      }, (err) => {
          //Error handled here 
        });

провайдера .ts

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) => {
     this.http.post(this.apisubmitbolUrl, JSON.stringify(data), httpOptions)
     .subscribe(res=>  {
       resolve(res);
     }, (err) => {
       reject(err);
     });
   });
  }
 }

Вызов работает нормально, но я знаю, что можно повысить эффективность.Кроме того, я знаю, что пакет rxjs предлагает такие функции, как «повторить», если вызов не удался, но я не уверен, как именно это можно реализовать.

Самая большая причина этого вопроса заключается в том, что мои клиенты потенциально будут использовать приложение в областях, где нет лучшего сотового соединения, поэтому вызовы API могут занять больше времени, и я, если соединение оборвется,хочу знать, какие инструменты я могу использовать, чтобы предоставить пользователю другие возможности.

Редактировать: package.json

{
  "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"
    ]
  }
}

Answer 1

Прежде всего, я призываю вас использовать HttpClient, если вы используете Http.Он был введен в Angular 4.3, и если вы используете его, вам не нужно делать .map(res => res.json())

. Сначала вам нужно будет добавить его HttpClientModule в массив imports вашего @NgModule.

import { HttpClientModule } from '@angular/common/http'
...
@NgModule({
  ...
  imports: [..., HttpClientModule, ...],
  ...
})

Угловой HttpClient возвращает Observable с, а не Promise с.Это дает вам преимущество, поскольку вы можете использовать такие операторы, как retry n раз в случае возникновения сетевой ошибки перед отображением пользователю сообщения об ошибке.

Ваш код может быть значительно реорганизован дляТо же самое.

import 'rxjs/add/operator/retry';
...
submitBOLData(data, authToken) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Accept': 'application/json, text/plain',
      'Content-Type': 'application/json',
      'Authorization': authToken
    })
  };

  return this.http.post(this.apisubmitbolUrl, data, httpOptions)
    .retry(3); // This will retry 3 times in case there's an error
}

Где вы используете эту функцию:

this.stemAPI.submitBOLData(this.submitAllData, this.reap.token)
  .subscribe(
    res => { /* Do what you want with this error */ }, 
    err => { /* Error handled here */ }
   );

Вот вам Sample StackBlitz для вашей ссылки.