角度 http 请求被延迟。我怎样才能加快速度？答案

【问题标题】：Angular http request is delayed. How can I speed it up?角度 http 请求被延迟。我怎样才能加快速度？
【发布时间】：2017-09-06 03:42:43
【问题描述】：

当我向 api 服务器调用 HTTP 请求时，响应延迟。

显示空表后，2秒后显示响应。

有没有办法解决这个问题？

【问题讨论】：

HTTP 请求本质上是async
是的，所以我使用这样的 Angular 2 承诺：'code' return new Promise((resolve, reject) => { this.http.get('/users' , {headers: headers}) .map(res => res.json()) .subscribe(res => { resolve(res); }, (err) => { reject(err); }); });
我不明白延迟是什么意思？延迟是否意味着您的http请求需要时间才能完成还是您已经响应并且需要时间才能显示？
我们对延迟无能为力。但是我们可以让它等待表格组件渲染，直到API响应使用resolvers
你需要测量服务器响应时间可能是服务器有问题，或者如果你正在调用一些远程服务，可能是network/connection问题。

标签： angular http rxjs

【解决方案1】：

使用resolvers 可以修复，显示空表。这是一个示例，说明如何使用resolver

// resolver.ts
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { ContactsService } from './contacts.service';

@Injectable()
export class ContactResolve implements Resolve<any> {

  constructor(private contactsService: ContactsService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.contactsService.getContact(route.params['id']);
  }
}

// router.ts
import { Routes } from '@angular/router';
import { ContactsListComponent } from './contacts-list.component';
import { ContactsDetailComponent } from './contacts-detail.component';
import { ContactResolve } from './contact.resolve';

export const AppRoutes: Routes = [
  { path: '', component: ContactsListComponent },
  { 
    path: 'contact/:id',
    component: ContactsDetailComponent,
    resolve: {
      contact: ContactResolve
    }
  }
];

An example with plunker, of how to use resolvers in angular2

【讨论】：

请在您的回答中提供一个示例。链接来来去去。
我认为解析器非常好，但是如果您在一个页面中有多个加载部分，其中一些加载速度更快，一些 - 不是，我想在加载部分完成之前查看页面。但我必须等到解析器解析数据。
如果一个页面有多个加载部分，那么我们可能不得不使用 structural directives 像 *ngIf 来隐藏特定部分直到得到它的 response

【解决方案2】：

由于您是从服务器获取数据，因此网络飞行应该会消耗一些时间，具体取决于您的互联网连接速度以及您的后端服务器对您的查询的响应程度。现在，您可以通过一些选项来改善您的用户体验。

您可以显示加载图标，直到服务器没有响应。这可以使用 ngIf 来实现。
您可以使用 @Rajez 指出的解析器。
您可以在表上使用async 管道，以便 Angular 知道它需要订阅数据并等待而不是显示空表。

希望这会有所帮助！如果您需要任何方法的代码 sn-p，请在评论中提及。

【讨论】：