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

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

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

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

我們將通過(guò)一個(gè) HTTP_INTERCEPTOR 機(jī)制來(lái)使用它，該機(jī)制將駐留在 HttpClient 服務(wù)中，并將操縱請(qǐng)求和響應(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)對(duì) HttpClient 服務(wù)執(zhí)行任何 API 調(diào)用時(shí)，都會(huì)調(diào)用此方法。

為了簡(jiǎn)單起見(jiàn)，我們僅針對(duì) GET 方法啟用 TransferState：

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

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

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

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

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

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

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

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

當(dāng)且僅當(dāng)注冊(cè)表中不存在給定的鍵，我們才在客戶(hù)端環(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論