在角度 2 中的 HTTP 请求之前和/或之后调用通用函数答案

【问题标题】：Call common function before and/or after HTTP request in angular 2在角度 2 中的 HTTP 请求之前和/或之后调用通用函数
【发布时间】：2017-02-06 06:33:17
【问题描述】：

我需要在整个 angular2 项目中设置通用加载器。所以我只想做的是当我的新http 调用生成它的GET、POST 或PUT 时，然后在请求发送加载程序出现之前。一旦http 响应（成功或错误）从服务器端到达，则加载程序应该消失。

我可以使用任何内置模块来完成上述功能。或者给我任何方式，以便我可以使用角度函数来完成。我正在使用rxjs 处理http 请求。

我不想使用 jQuery 或 Javascript。

【问题讨论】：

标签： angular httprequest rxjs loader npm-request

【解决方案1】：

创建 http 拦截器并在其中调用您的常用函数。您可以编写自己的拦截器实现like this 或使用an external library

【讨论】：

【解决方案2】：

扩展 HTTP 效果很好 - 在我们的项目中，我们还希望在某些情况下显式控制“加载器”，即微调器。因此，我们的核心module 中有一个 SpinnerService 可供所有组件使用。

@Injectable()
export class SpinnerService {

  private spinnerStateSource = new Subject<SpinnerState>();
  spinnerState$ = this.spinnerStateSource.asObservable();

  private defaultMessage: string = 'Loading...';

  show(message?: string) {

    let msg = this.defaultMessage as string;
    if (message) {
      msg = message;
    }

    this.spinnerStateSource.next({ showing: true, message: msg });
  }

  hide() {
    this.spinnerStateSource.next({ showing: false, message: '' });
  }

  spin(obs: Observable<any>, message?: string): Observable<any> {
    this.show(message);
    return obs.finally(() => this.hide());
  }

}

class SpinnerState {
  showing: boolean;
  message: string;
}

主模块中的组件订阅服务以显示/隐藏实际的微调器 UI（编辑：就像在 @Gunter 的回答中一样），其他组件可以（通过服务）告诉微调器显示/隐藏。

我们使用它的一个例子是，如果一个组件必须进行多次 HTTP 调用，例如获取一些参考数据，然后我们希望微调器显示直到所有这些调用完成。所以我们用我们正在等待的动作调用spin函数

例如在消费组件中：

this.spinnerService.spin(
     Observable.forkJoin(
       this.refDataService.getRefDataList('statusTypes'),
       this.refDataService.getRefDataList('itemTypes')
     )
 ).subscribe(result => {
             this.statusTypes = result[0];
             this.itemTypes = result[1];
 });

【讨论】：

这里你使用了SpinnerState。它的默认值是多少？复制此代码时出现错误。还有spinnerState$是什么？
这是一种包含要传递给微调器的信息的类型 - 我已经编辑了我的帖子
它工作正常，但我需要在我使用它的方法的地方导入这个服务。有什么方法可以共同设置吗？当任何 HTTP 请求产生时，它会自动调用spinnerService.spin 方法，所以我不需要在每个请求中都调用这个方法。
如果您希望它默认应用于所有 HTTP 调用，您需要扩展标准 http 服务（如@Slava 添加的链接问题中所述），并在那里注入 SpinnerService。我想微调器和“自定义”http 服务都将在核心模块中定义。

【解决方案3】：

@Injectable()
class MyService {
  private change:Subject<boolean> = new BehaviorSubject(false);
  public change$ = this.change.asObservable();

  constructor(private http:Http) {}

  get(...) {
    this.change.next(true)
    return this.http.get( ... )
    .map( ... )
    .finally(_ => this.change.next(false);
  }
}

@Component({
  selector: 'loader',
  template: `
  <div *ngIf="myService.change | async">is loading ...</div>
`
)}
class LoaderComponent {
  constructor(public myService:MyService){}
}

【讨论】：