打字稿魔术：http客户端获取不会触发请求

Question

我需要帮助 :) 我正在开始创建授权服务，突然 http 客户端无法在此服务中工作，我不知道为什么，在玩了四个小时的代码后也没有任何想法。服务真的很简单。

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { UrlsService, Urls } from '@app/shared/urls';
import { Injectable } from '@angular/core'

@Injectable()
export class AuthorizationService {
    private _permissions: string[];

    constructor(
        private httpClient: HttpClient,
        private urlsService: UrlsService) {

    }

    refreshPermissions(): Observable<string[]> {
        return this.httpClient
            .get('http://localhost:54531/api/account/permissions', { observe: 'response'})
            .map(response => {
                console.log(response);
                return this._permissions;
            });
    }

    get permissions(): string[] {
        return this._permissions;
    }

refreshPermissions 方法调用每个用户的凭据更新。看看 app.component.ts

ngOnInit() {  
       this.authenticationService.setCredentialsSubject.subscribe(() => this.authorizationService.refreshPermissions());
       this.authenticationService.loadCredentialsFromLocalStorage();
}

我已经在 map 函数上设置了断点来查看响应结构。但相反，我看到了错误。此外，在网络选项卡中，我可以看到该请求尚未触发。最后，map labmda 中的断点从未触发过。

我花了四个小时试图找出错误，但没有成功。你知道会发生什么吗？

附言。第一个屏幕的错误

"SyntaxError: Unexpected end of input
    at AuthorizationService.refreshPermissions (webpack-internal:///./src/app/core/authentication/authorization/authorization.service.ts:14:14)
    at SafeSubscriber.eval [as _next] (webpack-internal:///./src/app/app.component.ts:40:116)
    at SafeSubscriber.__tryOrUnsub (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:245:16)
    at SafeSubscriber.next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:192:22)
    at Subscriber._next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:133:26)
    at Subscriber.next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:18)
    at Subject.next (webpack-internal:///./node_modules/rxjs/_esm5/Subject.js:66:25)
    at AuthenticationService.setCredentials (webpack-internal:///./src/app/core/authentication/authentication.service.ts:86:37)
    at AuthenticationService.loadCredentialsFromLocalStorage (webpack-internal:///./src/app/core/authentication/authentication.service.ts:61:14)
    at AppComponent.ngOnInit (webpack-internal:///./src/app/app.component.ts:41:36)"

Answer 1

您没有订阅 refreshPermissions 功能。如果没有订阅，您的函数将不会被触发。

你可以通过使用这个 ngOnInit 函数来简单地解决这个问题：

ngOnInit() {  
   this.authenticationService.setCredentialsSubject.subscribe(() => this.authorizationService.refreshPermissions().subscribe(result => {}));
   this.authenticationService.loadCredentialsFromLocalStorage();
}

比拥有多个订阅更好的是使用 rxjs 的运算符之一，例如 flatmap：

ngOnInit() {  
    this.authenticationService.setCredentialsSubject.flatMap(() => 
        this.authorizationService.refreshPermissions()
    ).subscribe(result => {
        //do something with result of refreshPermissions observable
    });
    this.authenticationService.loadCredentialsFromLocalStorage();
}

最终代码

permissions.service

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { UrlsService, Urls } from '@app/shared/urls';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

type PermissionType = 'Permission1' | 'Permission2';
type PermissionsSubject = BehaviorSubject<PermissionType[]>;

export class AuthorizationService {
    private _permissionsSubject: PermissionsSubject = new BehaviorSubject<PermissionType[]>([]);

    constructor(
        private httpClient: HttpClient,
        private urlsService: UrlsService) {

    }

    refreshPermissions(): void {
        const getPermissionsObservable = this.httpClient
            .get<PermissionType[]>(this.urlsService.getUrl(Urls.GET_PERMISSIONS));
        getPermissionsObservable.subscribe(permissions => this._permissionsSubject.next(permissions));
    }

    get permissions(): PermissionType[] {
        return this._permissionsSubject.value;
    }

    get permissionsSubject(): PermissionsSubject {
        return this._permissionsSubject;
    }
}

在 app.component 中

ngOnInit() {
    authenticationService.setCredentialsSubject.subscribe(() => authorizationService.refreshPermissions());
    authenticationService.loadCredentialsFromLocalStorage()
}