這篇文章主要介紹了使用?Angular?服務(wù)器端渲染?Transfer?State?Service,假設(shè)我們使用?Angular?Universal?開(kāi)發(fā)一個(gè)服務(wù)器端渲染的?Angular?應(yīng)用，這個(gè)應(yīng)用會(huì)消費(fèi)一個(gè)第三方的?Restful?API

假設(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: