angular - HTTP 请求效率 Angular 4+

Question

关于通过 Angular 发出的 http 请求，我有一个非常广泛但简单的问题。我有一个使用 Angular http 请求的 Ionic 应用程序，但我不确定我是否充分利用了 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

首先，如果您正在使用 Http，我强烈建议您使用 HttpClient。它是在 Angular 4.3 中引入的，如果您使用它，则不需要执行 .map(res => res.json())

您首先必须将它添加到 @NgModule 的 imports 数组中。

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

Angular HttpClient 返回 Observable 而不是 Promise。这给了你一个优势，因为你可以在向用户显示错误消息之前使用 retry n times 之类的运算符，以防出现网络错误。

您的代码可以为此进行显着重构。

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供您引用。