是否可以在 Angular2(Typescript) 中创建一个解析器 Class 来处理响应?
Is it possible to create a Parser Class in Angular2(Typescript) to process response?
我知道我可以在 Angular 2(Typescript) 中制作一个组件和一个服务,并且可以解析组件中的响应,但我希望我的架构如下所示,因为响应的任何变化我将只需要更改我的解析器:
Service : Do API call and fetch response. Has a get response method.
Parser : Gets Response and parses response and returns response in a usable form to the component.
Component : gets Response from the parser and display data to view.
为了做到这一点,我正在使用来自服务的可观察对象并在解析器中订阅它。然后使用来自解析器的可观察对象并在组件中订阅它。
但是在这样做的时候出现了很多错误。我是否遗漏了任何步骤,或者这是解决问题的正确方法。
添加代码:
组件:::
import { AuthenticateParser } from './../../parsers/authenticate.parser';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-component',
moduleId: module.id,
templateUrl: './app.component.html',
providers : [AuthenticateParser]
})
export class AppComponent implements OnInit {
// Constructor Function
constructor(private _authenticationService: AuthenticateParser) {
}
ngOnInit(): void {
this._authenticationService.setAuthenticationToken();
}
}
服务:::
import { Observable } from 'rxjs/Observable';
import { IRequest } from './api.interaction.interface';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
@Injectable()
export class ApiInteractionService {
// Constructor Function
constructor(private _http: Http) {
}
getApiResponse(p_attr: IRequest): Observable<Response> {
// Set request url
let _authenticationUrl: string = p_attr.url;
// Set request body
let _body: any = p_attr.body;
// Set content type to JSON
let _headers = new Headers(p_attr.header);
// Set a request option
let _options = new RequestOptions({ headers: _headers });
return this._http[p_attr.method](_authenticationUrl, _body, _options)
.map((response: Response) => response.json()) ///... change response to JSON format
.do((data:any) => console.log('All : ' + JSON.stringify(data))) //... console response
.catch((error: any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
}}
解析器:::
import { Injectable, Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { IRequest } from './../services/api.interaction.interface';
import { ApiInteractionService } from './../services/api.interaction.service';
@Injectable()
export class AuthenticateParser {
private _authenticationToken: string = '';
// Constructor Function
constructor(private _authenticationService: ApiInteractionService) {
}
// Fetches Authentication Token
setAuthenticationToken(): void {
let p_url: string = 'http://10.5.214.82:8443/auth/authenticate';
let p_body: Object = {
"userId": "admin",
"password": "admin"
};
let p_header: Object = {
"Content-Type": "application/json"
};
let p_attrs: IRequest = {
'method': 'post',
'url': p_url,
'body': p_body,
'header': p_header
};
this._authenticationService.getApiResponse(p_attrs)
.subscribe(
response => this.parseSuccessResponse(response),
error => this.parseErrorResponse(error)
);
}
// Parses Token response and sets it.
parseSuccessResponse(p_response: any): void {
this._authenticationToken = p_response.data;
}
// Parses Error response and sets it.
parseErrorResponse(p_error: any): void {
this._authenticationToken = p_error.data;
}
// returns authentication token
getAuthenticationToken():string {
return this._authenticationToken;
}
}
听起来您想将解析器作为服务。如果您提供示例代码将会有所帮助。
在您的解析器中,您可以订阅 http.get 响应,然后解析响应,然后 将结果发布到主题 。然后在您的组件中,您从解析器订阅主题。
您的解析器将类似于:
import { Injectable, OnInit} from '@angular/core';
import { Subject } from 'rxjs/Subject';
import {YourService} from '....''
@Injectable()
export class ParseService implements OnInit {
public parseSubject: Subject<any> = new Subject <any>();
constructor(private service: YourService) {}
ngOnInit(){
this.service.yourGetFunction()
.map(res=> res.json())
.subscribe(
response => {
parse logic that stores result in parsedObj
parseSubject.next(parsedObj);
},
error => { this.errorMessage = <any>error});
}
}
现在在您的组件中,您可以导入 ParseService
并订阅其 parseSubject 以获取解析后的输出
我知道我可以在 Angular 2(Typescript) 中制作一个组件和一个服务,并且可以解析组件中的响应,但我希望我的架构如下所示,因为响应的任何变化我将只需要更改我的解析器:
Service : Do API call and fetch response. Has a get response method.
Parser : Gets Response and parses response and returns response in a usable form to the component.
Component : gets Response from the parser and display data to view.
为了做到这一点,我正在使用来自服务的可观察对象并在解析器中订阅它。然后使用来自解析器的可观察对象并在组件中订阅它。
但是在这样做的时候出现了很多错误。我是否遗漏了任何步骤,或者这是解决问题的正确方法。
添加代码:
组件:::
import { AuthenticateParser } from './../../parsers/authenticate.parser';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-component',
moduleId: module.id,
templateUrl: './app.component.html',
providers : [AuthenticateParser]
})
export class AppComponent implements OnInit {
// Constructor Function
constructor(private _authenticationService: AuthenticateParser) {
}
ngOnInit(): void {
this._authenticationService.setAuthenticationToken();
}
}
服务:::
import { Observable } from 'rxjs/Observable';
import { IRequest } from './api.interaction.interface';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
@Injectable()
export class ApiInteractionService {
// Constructor Function
constructor(private _http: Http) {
}
getApiResponse(p_attr: IRequest): Observable<Response> {
// Set request url
let _authenticationUrl: string = p_attr.url;
// Set request body
let _body: any = p_attr.body;
// Set content type to JSON
let _headers = new Headers(p_attr.header);
// Set a request option
let _options = new RequestOptions({ headers: _headers });
return this._http[p_attr.method](_authenticationUrl, _body, _options)
.map((response: Response) => response.json()) ///... change response to JSON format
.do((data:any) => console.log('All : ' + JSON.stringify(data))) //... console response
.catch((error: any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
}}
解析器:::
import { Injectable, Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { IRequest } from './../services/api.interaction.interface';
import { ApiInteractionService } from './../services/api.interaction.service';
@Injectable()
export class AuthenticateParser {
private _authenticationToken: string = '';
// Constructor Function
constructor(private _authenticationService: ApiInteractionService) {
}
// Fetches Authentication Token
setAuthenticationToken(): void {
let p_url: string = 'http://10.5.214.82:8443/auth/authenticate';
let p_body: Object = {
"userId": "admin",
"password": "admin"
};
let p_header: Object = {
"Content-Type": "application/json"
};
let p_attrs: IRequest = {
'method': 'post',
'url': p_url,
'body': p_body,
'header': p_header
};
this._authenticationService.getApiResponse(p_attrs)
.subscribe(
response => this.parseSuccessResponse(response),
error => this.parseErrorResponse(error)
);
}
// Parses Token response and sets it.
parseSuccessResponse(p_response: any): void {
this._authenticationToken = p_response.data;
}
// Parses Error response and sets it.
parseErrorResponse(p_error: any): void {
this._authenticationToken = p_error.data;
}
// returns authentication token
getAuthenticationToken():string {
return this._authenticationToken;
}
}
听起来您想将解析器作为服务。如果您提供示例代码将会有所帮助。
在您的解析器中,您可以订阅 http.get 响应,然后解析响应,然后 将结果发布到主题 。然后在您的组件中,您从解析器订阅主题。
您的解析器将类似于:
import { Injectable, OnInit} from '@angular/core';
import { Subject } from 'rxjs/Subject';
import {YourService} from '....''
@Injectable()
export class ParseService implements OnInit {
public parseSubject: Subject<any> = new Subject <any>();
constructor(private service: YourService) {}
ngOnInit(){
this.service.yourGetFunction()
.map(res=> res.json())
.subscribe(
response => {
parse logic that stores result in parsedObj
parseSubject.next(parsedObj);
},
error => { this.errorMessage = <any>error});
}
}
现在在您的组件中,您可以导入 ParseService
并订阅其 parseSubject 以获取解析后的输出