angular - 服务器在渲染之前不会等到 http 调用完成 - Angular 4 服务器端渲染

Question

我已经开始实现 Angular Universal，并且能够通过服务器端渲染来渲染 html 的静态部分。我面临的问题是，正在进行 API 调用并且服务器正在渲染 html，而无需等待 http 调用完成。因此，我的模板依赖于从 api 调用获得的数据的部分未在服务器上呈现。

更多信息:

我在节点服务器中使用身份验证，仅当用户通过身份验证并在响应时设置 cookie 时才提供索引 html。

每当我从 Angular 进行 API 调用时，我也会将 cookie 作为 header 发送，因为相关服务也会使用 token 验证用户。对于服务器端呈现，由于 cookie 在服务器级别不可用，我已成功注入(inject)请求并为 API 调用选择 cookie。因此，API 调用成功，但服务器不会等待呈现，直到 promise 解决。

我尝试过但没有成功的步骤:

我已按照此评论中的建议更改了我的区域版本 https://github.com/angular/universal-starter/issues/181#issuecomment-250177280

如果需要任何进一步的信息，请告诉我。

将我引导到一个包含 http 调用的 Angular 通用样板会对我有所帮助。

Answer 1

我已经使用 muradm 创建了一个用于执行异步 API 调用的服务代码。

Gist link.

import { Injectable } from '@angular/core';
import { Observable, Observer, Subscription } from 'rxjs';



@Injectable({
  providedIn: 'root'
})
export class AsyncApiCallHelperService {

  taskProcessor: MyAsyncTaskProcessor;
  constructor() {
    this.taskProcessor = new MyAsyncTaskProcessor();
  }

  doTask<T>(promise: Promise<T>) {
    return <Observable<T>> this.taskProcessor.doTask(promise);
  }
}

declare const Zone: any;

export abstract class ZoneMacroTaskWrapper<S, R> {
  wrap(request: S): Observable<R> {
    return new Observable((observer: Observer<R>) => {
      let task;
      let scheduled = false;
      let sub: Subscription|null = null;
      let savedResult: any = null;
      let savedError: any = null;

      // tslint:disable-next-line:no-shadowed-variable
      const scheduleTask = (_task: any) => {
        task = _task;
        scheduled = true;

        const delegate = this.delegate(request);
        sub = delegate.subscribe(
            res => savedResult = res,
            err => {
              if (!scheduled) {
                throw new Error(
                    'An http observable was completed twice. This shouldn\'t happen, please file a bug.');
              }
              savedError = err;
              scheduled = false;
              task.invoke();
            },
            () => {
              if (!scheduled) {
                throw new Error(
                    'An http observable was completed twice. This shouldn\'t happen, please file a bug.');
              }
              scheduled = false;
              task.invoke();
            });
      };

      // tslint:disable-next-line:no-shadowed-variable
      const cancelTask = (_task: any) => {
        if (!scheduled) {
          return;
        }
        scheduled = false;
        if (sub) {
          sub.unsubscribe();
          sub = null;
        }
      };

      const onComplete = () => {
        if (savedError !== null) {
          observer.error(savedError);
        } else {
          observer.next(savedResult);
          observer.complete();
        }
      };

      // MockBackend for Http is synchronous, which means that if scheduleTask is by
      // scheduleMacroTask, the request will hit MockBackend and the response will be
      // sent, causing task.invoke() to be called.
      const _task = Zone.current.scheduleMacroTask(
          'ZoneMacroTaskWrapper.subscribe', onComplete, {}, () => null, cancelTask);
      scheduleTask(_task);

      return () => {
        if (scheduled && task) {
          task.zone.cancelTask(task);
          scheduled = false;
        }
        if (sub) {
          sub.unsubscribe();
          sub = null;
        }
      };
    });
  }

  protected abstract delegate(request: S): Observable<R>;
}

export class MyAsyncTaskProcessor extends
    ZoneMacroTaskWrapper<Promise<any>, any> {

  constructor() { super(); }

  // your public task invocation method signature
  doTask(request: Promise<any>): Observable<any> {
    // call via ZoneMacroTaskWrapper
    return this.wrap(request);
  }

  // delegated raw implementation that will be called by ZoneMacroTaskWrapper
  protected delegate(request: Promise<any>): Observable<any> {
    return new Observable<any>((observer: Observer<any>) => {
      // calling observer.next / complete / error
      request
      .then(result => {
        observer.next(result);
        observer.complete();
      }).catch(error => observer.error(error));
    });
  }
}

我希望这对某人有帮助。