快捷導(dǎo)航

JS?Angular?服務(wù)器端渲染應(yīng)用設(shè)置渲染超時(shí)時(shí)間???????

更新時(shí)間：2022年06月27日 09:13:37 作者：??JerryWang_sap????

這篇文章主要介紹了JS?Angular服務(wù)器端渲染應(yīng)用設(shè)置渲染超時(shí)時(shí)間,???????通過(guò)setTimeout模擬一個(gè)需要5秒鐘才能完成調(diào)用的API展開(kāi)詳情，需要的小伙伴可以參考一下

我們用 setTimeout 模擬一個(gè)需要 5 秒鐘才能完成調(diào)用的 API：

const express = require('express');
const app = express();
app.get('/api/fast', (req, res) => {
  console.log('fast endpoint hit');
  res.send({response: 'fast'});
});
app.get('/api/slow', (req, res) => {
  setTimeout(() => {
      console.log('slow endpoint hit');
      res.send({response: 'slow'});
  }, 5000);
});
app.listen(8081, () => {
  console.log('Listening');
});

然后新建一個(gè) Angular service，調(diào)用這個(gè) /api/slow:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
 providedIn: 'root'
})
export class CustomService {
 constructor(private http: HttpClient) {}
 public getFast(): Observable<any> {
   return this.http.get<any>('http://localhost:8081/api/fast');
 }
 public getSlow(): Observable<any> {
   return this.http.get<any>('http://localhost:8081/api/slow');
 }
}

在服務(wù)器端渲染模式下，等待這個(gè) API 調(diào)用的返回，至少需要花費(fèi) 5 秒鐘。我們可以給這個(gè) API 調(diào)用設(shè)置一個(gè)超時(shí)機(jī)制。如果服務(wù)器端渲染時(shí)超過(guò)我們指定的超時(shí)間隔，還沒(méi)有得到 API 響應(yīng)，我們就放棄這次 API 調(diào)用，讓其在客戶端渲染模式下繼續(xù)進(jìn)行。

我們使用 RouteResolver 來(lái)實(shí)現(xiàn)。

從 Angular route 框架導(dǎo)入 router：

import { Resolve } from '@angular/router';

從 Angular common 開(kāi)發(fā)包導(dǎo)入 Angular 運(yùn)行環(huán)境監(jiān)測(cè)的 API：

import { isPlatformBrowser } from '@angular/common';

導(dǎo)入 injection token，獲得當(dāng)前運(yùn)行的 platform id：

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';

新建一個(gè) service class：

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable, timer } from 'rxjs';
import { isPlatformBrowser } from '@angular/common';
import { CustomService } from './custom.service';
import { takeUntil } from 'rxjs/operators';
@Injectable({
 providedIn: 'root'
})
export class SlowComponentResolverService implements Resolve<any> {
 constructor(private service: CustomService, @Inject(PLATFORM_ID) private platformId: any) { }
 public resolve(): Observable<any> {
   if (isPlatformBrowser(this.platformId)) {
     return this.service.getSlow();
   }

如果當(dāng)前應(yīng)用運(yùn)行于瀏覽器端，上圖的 isPlatformBrowser(this.platformId) 返回 true，因此直接調(diào)用慢速 API.

否則創(chuàng)建一個(gè) Observable，500 毫秒后發(fā)射值：

const watchdog: Observable<number> = timer(500);

我們將這個(gè) watchDog Observable 通過(guò) pipe 設(shè)置到 this.service.getSlow 的下游。這樣，如果 this.service.getSlow() 返回的 Observable 在 500 毫秒之內(nèi)不 emit 值的話，watchdog 就會(huì)向 Component push null 值，否則，API 的真實(shí) response 會(huì)推送給 Component.

我們需要更新應(yīng)用相關(guān)的 routing 代碼來(lái)消費(fèi)這個(gè) Resolver.

給 slowComponent 分配一個(gè) resolver：

const routes: Routes = [
{path: '', redirectTo: 'fast', pathMatch: 'full'},
{path: 'fast', component: FastComponent},
{path: 'slow', component: SlowComponent, resolve: {response: SlowComponentResolverService}}
];

在 slowComponent 的實(shí)現(xiàn)代碼里，從分配的 Route resolver 里讀取 API response 數(shù)據(jù)：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-slow',
template: `
  <p>
    Response is: {{response | json}}
  </p>
`,
styles: []
})
export class SlowComponent {

public response: any = this.router.snapshot.data.response;
constructor(private router: ActivatedRoute) {}
}

注意這里并沒(méi)有直接訪問(wèn) Route Resolver：this.router.snapshot.data.response

當(dāng) API 在 500 毫秒之內(nèi)返回時(shí)，所有的 slowComponent 源代碼都由服務(wù)器端生成：

當(dāng) API 500 毫秒未能成功返回?cái)?shù)據(jù)，則客戶端會(huì)再次調(diào)用該 API，然后在客戶端完成渲染：

到此這篇關(guān)于JS Angular 服務(wù)器端渲染應(yīng)用設(shè)置渲染超時(shí)時(shí)間的文章就介紹到這了,更多相關(guān)JS Angular 服務(wù)器端渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: