Question

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

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

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

Answer 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

Answer 2

由于您从服务器获取数据，因此网络飞行应该消耗一些时间，具体取决于您的互联网连接速度以及后端服务器对您的查询的响应情况。现在有一些选项可以让您的用户体验更好。

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

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

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

2 个答案: