假設(shè)我們使用 Angular Universal 開發(fā)一個(gè)服務(wù)器端渲染的 Angular 應(yīng)用，這個(gè)應(yīng)用會消費(fèi)一個(gè)第三方的 Restful API.

上述場景分為下列六個(gè)步驟：

• 用戶向部署了 Angular 服務(wù)器端應(yīng)用的 Node.js 服務(wù)器發(fā)起頁面請求
• Node.js 調(diào)用第三方 Restful API，
• 第三方 Restful API 返回結(jié)果，這個(gè)結(jié)果被用于渲染最后的頁面
• 服務(wù)器端渲染的頁面，返回給瀏覽器
• Angular 在瀏覽器中引導(dǎo)，并再次調(diào)用 Restful API
• Restful API 返回給瀏覽器，Angular 客戶端應(yīng)用重新將數(shù)據(jù)渲染到視圖中。

我們可以通過創(chuàng)建 TransferState 服務(wù)來提高應(yīng)用程序的效率，該服務(wù)是在 Node.js 服務(wù)器和瀏覽器中呈現(xiàn)的應(yīng)用程序之間交換的一個(gè)鍵值注冊表。

我們將通過一個(gè) HTTP_INTERCEPTOR 機(jī)制來使用它，該機(jī)制將駐留在 HttpClient 服務(wù)中，并將操縱請求和響應(yīng)。

創(chuàng)建一個(gè)新的 class，實(shí)現(xiàn) HttpInterceptor 接口定義的 intercept 方法：

@Injectable({
 providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>

每當(dāng)對 HttpClient 服務(wù)執(zhí)行任何 API 調(diào)用時(shí)，都會調(diào)用此方法。

為了簡單起見，我們僅針對 GET 方法啟用 TransferState：

if (request.method !== 'GET') {
     return next.handle(request);
   }

我們根據(jù) GET 請求的 URL 生成一個(gè)密鑰。 我們將使用鍵值對來存儲或檢索請求響應(yīng)，具體取決于請求是在服務(wù)器端還是瀏覽器端處理：

const key: StateKey<string> = makeStateKey<string>(request.url);

為了區(qū)分服務(wù)器和瀏覽器運(yùn)行環(huán)境，我們使用@angular/common庫中的 isPlatformServer 方法以及 PLATFORM_ID 注入令牌：

 if (isPlatformServer(this.platformId)) {
       //serverSide
   } else {
       //browserSide
   }

當(dāng)服務(wù)器端渲染時(shí)，我們將 API 結(jié)果寫入 Transfer State 注冊表中：

 if (isPlatformServer(this.platformId)) {
    return next.handle(request).pipe(tap((event) => {
      this.transferState.set(key, (<HttpResponse<any>> event).body);
    }));

在瀏覽器端代碼中，我們要檢查給定 HTTP 請求的響應(yīng)是否已經(jīng)駐留在 Transfer State 注冊表中。 如果存在，我們直接從注冊表中取出值，并清除注冊表，以便將來的調(diào)用可以存儲新數(shù)據(jù)，并將響應(yīng)返回給調(diào)用者。

當(dāng)且僅當(dāng)注冊表中不存在給定的鍵，我們才在客戶端環(huán)境下執(zhí)行 HTTP 調(diào)用。

  else {
    const storedResponse = this.transferState.get<any>(key, null);
    if (storedResponse) {
      const response = new HttpResponse({body: storedResponse, status: 200});
      this.transferState.remove(key);
      return of(response);
    } else {
      return next.handle(request);
    }
  }

到此這篇關(guān)于使用 Angular 服務(wù)器端渲染 Transfer State Service的文章就介紹到這了,更多相關(guān) Angular Transfer State Service內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論