我在我的客户端应用程序中使用 Angular 4。
customer.service 中的 getCustomer() 函数调用 API 来获取数据。这个函数是可观察的。
此函数需要访问令牌才能调用 API。访问令牌可以通过 auth.service 中的 getAccessToken() 函数获取。
但 getAccessToen() 是异步的。我们如何从 async 函数中获取值？
请注意，getCustomer() 必须是可观察的，以便我可以将响应中的数据映射并绑定到 customer.component 的成员。
auth.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthService {
private tokenEndpoint = "http://localhost:9000/connect/token";
private clientId = "testclientid";
private clientSecret = "testsecret";
constructor(private http: Http) { }
getAccessToken() : Observable<any> {
let credential = "Basic " + btoa(`${this.clientId}:${this.clientSecret}`);
let body = "grant_type=client_credentials&scope=testscope";
let headers = new Headers();
headers.set("Content-Type", "application/x-www-form-urlencoded");
headers.set("Authorization", credential);
return this.http.post(this.tokenEndpoint, body, { headers: headers })
.map(result => {
let data = result.json();
return data.access_token || "";
});
}
}
客户服务.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Customer } from './customer';
import { Address } from './customer';
import { ResourceData } from './customer';
import { ResourceAttributes } from './customer';
import { CustomerResource } from './customer';
import { ResourceCollection } from './customer';
import { AuthService } from '../auth/auth.service';
@Injectable()
export class CustomerService {
private customersUrl = "http://localhost:60001/api/v1/customers";
constructor(private http: Http, private authService: AuthService) { }
getCustomer(id: string): Observable<CustomerResource> {
let accessToken = this.authService.getAccessToken().subcribe(
// how to get accessToken from authService because subcribe is async?
);
let headers = addAccessTokenToHeader(accessToken);
let url = `${this.customersUrl}/${id}`;
return this.http.get(url, { headers: headers })
.map(result => {
return result.json() as CustomerResource;
})
.catch((error) => {
console.log(error);
return Observable.throw(error);
});
}
private addAccessTokenToHeader(accessToken: string): Headers {
let headers = new Headers();
headers.set("Authorization", `Bearer ${accessToken}`);
return headers;
}
}
客户详细信息.component.ts
showCustomer(id: string) {
this.modalTitle = "Update PL customer";
this.buttonSaveTitle = "Update";
this.customerService.getCustomer(id)
.subscribe(customer => {
this.mapFromResource(customer.data);
this.customerModal.show();
});
}
private mapFromResource(data: ResourceData) {
this.customerId = data.id;
this.reference = data.attributes.reference;
this.lastName = data.attributes.lastName;
this.middleName = data.attributes.middleName;
this.firstName = data.attributes.firstName;
}
// this.customerId, this.reference are the members of customer.component. They are binding on UI.
从我的头顶，在你的customer.service.ts您可以使用如下方式链接方法调用：
getCustomer(id: string): Observable<CustomerResource> {
this.authService.getAccessToken()
.map((accessToken) => {
let headers = addAccessTokenToHeader(accessToken);
let url = `${this.customersUrl}/${id}`;
return this.http.get(url, { headers: headers })
// rest of the code
});
如果不起作用，请尝试更换.map with .switchMap.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
