HTTP请求效率角4+
HTTP请求效率角4+
提问于 2018-10-15 13:43:19
我有一个非常广泛，但很简单的问题，通过角http请求。我有一个Ionic应用程序使用角质http请求，但我不确定我是否充分利用了what提供的速度和效率。我的职位请求的当前代码：
页面发送数据.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包提供类似于"retry“的功能，但我不确定如何实现这一点。
这个问题的最大原因是因为我的客户可能会在没有最好的蜂窝连接的地方使用这个应用程序，所以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"
]
}
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-15 13:52:44
首先，如果您使用的是HttpClient，我建议您使用Http。它是在角4.3中引入的，如果您使用它，则不需要执行.map(res => res.json())
首先必须将它添加到HttpClientModule到@NgModule的imports数组中。
import { HttpClientModule } from '@angular/common/http'
...
@NgModule({
...
imports: [..., HttpClientModule, ...],
...
})HttpClient返回的是Observables而不是Promises，这给了您一种优势，因为您可以像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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52818160
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号