Angular http請求被延遲。 我如何加快速度？

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
    }
  }
];

使用plunker的示例，說明如何在angular2中使用解析器

Answer 2

由於您正在從服務器中獲取數據，因此網絡飛行應該消耗一些時間，具體取決於您的Internet連接速度以及后端服務器對查詢的響應程度。 現在，您可以通過一些選項來提高用戶體驗。

• 您可以顯示一個加載圖標，直到服務器無響應為止。 這可以使用ngIf實現。
• 您可以使用@Rajez指出的解析器。
• 您可以在表上使用async管道，以便angular知道它需要訂閱數據並等待而不是顯示空表。

希望這可以幫助！ 如果您需要任何方法的代碼段，請在注釋中提及。