[英]Ionic - Angular 2 - subscribe to http.post response
我有一些代码可以与您分享。 它来自Ionic 2项目。 我认为这是不好的做法,所以我想正确地重构它。
我正在将base64中的图像发送到API,API在服务器上将图像另存为.png,然后在API服务器上向我发送带有该图像URL的响应。 该应用程序在等待API响应时会显示一个加载屏幕,因此您无法同时进行多个调用。 API还会为每个调用回复1个响应,仅此而已。
这是简单的调用:
private _imgUrl = new Subject<string>();
public getImgUrl(imgURI: any): Observable<string> {
this.apiImgUrl(imgURI);
return this._imgUrl.asObservable();
}
private setImgUrl(url: any) {
this._imgUrl.next(url);
}
private apiImgUrl(imgURI: string) {
var data = {
src: imgURI
};
var postData = JSON.stringify(data);
var headers = new Headers({ 'Content-Type': 'application/json' });
var options = new RequestOptions({ headers: headers });
this.http.post(
'my-api-url.com',
postData,
options
)
.retry(3)
.toPromise()
.then((res) => {
var body = res.json();
this.setImgUrl(body);
})
.catch(this.handleErrorPromise);
}
import { ApiService } from '../shared';
...
private socialImageSubscription: Subscription;
private i = 0;
constructor(private _api: ApiService) {}
private getImageFromAPI(canvasURI) {
this.socialImageSubscription = this._api.getImgUrl(canvasURI).subscribe((res:any) => {
this.i++;
console.log(this.i, 'socialImageSubscription', res.data);
// doing something with the response
});
}
现在, getImageFromAPI()
由(click)
触发。 因此,如果单击一次,将得到以下控制台日志:
1,"socialImageSubscription", www.apidomain.com/url1
第二次单击:
2,"socialImageSubscription", www.apidomain.com/url2
3,"socialImageSubscription", www.apidomain.com/url2
第三次单击:
4,"socialImageSubscription", www.apidomain.com/url3
5,"socialImageSubscription", www.apidomain.com/url3
6,"socialImageSubscription", www.apidomain.com/url4
因此,每次我访问getImageFromAPI()
它都会创建一个新订阅,而先前的订阅仍处于活动状态。
如何正确编写此代码?
试试这个:它可以解决您的问题。
private getImageFromAPI(canvasURI) {
this._api.getImgUrl(canvasURI).subscribe((res:any) => {
this.i++;
console.log(this.i, 'socialImageSubscription', res.data);
// doing something with the response
}).unsubscribe(); // unsubscribe here
}
立即取消订阅,这样您就不会激活订阅。 另外,您在这里不需要订阅变量。
玩了一下,发现我在找什么:
private apiImgUrl(imgURI: string) {
var data = {
src: imgURI
};
var postData = JSON.stringify(data);
var headers = new Headers({ 'Content-Type': 'application/json' });
var options = new RequestOptions({ headers: headers });
return this.http.post(
'my-api-url.com',
postData,
options
)
.retry(3)
.toPromise()
.then((res) => {
var body = res.json();
return body;
})
.catch(this.handleErrorPromise);
}
import { ApiService } from '../shared';
...
private i = 0;
constructor(private _api: ApiService) {}
private getImageFromAPI(canvasURI) {
this._api.apiImgUrl(canvasURI).then((res:any) => {
this.i++;
console.log(this.i, 'socialImageSubscription', res.data);
// doing something with the response
});
}
该代码更容易阅读,并删除了无用的订阅。 控制台日志就是您所期望的。 第一次点击:
1,"socialImageSubscription", www.apidomain.com/url1
第二次单击:
2,"socialImageSubscription", www.apidomain.com/url2
第三次单击:
3,"socialImageSubscription", www.apidomain.com/url3
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.