Angular4：记录服务器响应的时间

【问题标题】：Angular4: Log the time taken by the server to respondAngular4：记录服务器响应的时间
【发布时间】：2018-01-24 18:03:11
【问题描述】：

我有一项服务可以获取项目详细信息，例如

public getProjectDetail(id: number): Observable<IProject> {
    if (id === undefined) {
      return Observable.of(this.initializeProject());
    }
    return this.http.get(this.url + 'api/v1/cmang_api/projects/' + id, { headers: this.headers })
      .map(this.extractResponse)
      .catch(this.handleError);
  }

我想控制服务器处理请求所花费的时间。有什么方法可以记录时间吗？

【问题讨论】：

只需查看浏览器调试工具中的网络选项卡即可。
如果你必须安慰它console.time是你的朋友，developer.mozilla.org/en-US/docs/Web/API/Console/time

标签： angular http rxjs

【解决方案1】：

在非常基本的调试级别，您可以将do 运算符与console.time() 结合使用；

public getProjectDetail(id: number): Observable<IProject> {
  if (id === undefined) {
    return Observable.of(this.initializeProject());
  }

  // start timer with label 'getProjectDetail()'
  console.time(`getProjectDetail(${id})`);    

  return this.http.get(this.url + 'api/v1/cmang_api/projects/' + id, { headers: this.headers })
    // end time with label 'getProjectDetail()'
    .do(res => console.timeEnd(`getProjectDetail(${id})`))
    .map(this.extractResponse)        
    .catch(this.handleError);
}

请记住，这将登录开发和生产环境。

输出如下：

getProjectDetail(someIdNumberDisplaysHere): 5171.75ms

希望对您有所帮助！

【讨论】：