首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 9中,如果navigator不在线,如何只对http get请求使用缓存

在Angular 9中,如果navigator不在线,我们可以使用Angular的HttpInterceptor来实现只对http get请求使用缓存的功能。

HttpInterceptor是Angular中的一个特性,用于拦截和处理http请求和响应。我们可以创建一个自定义的HttpInterceptor,在其intercept方法中实现对http请求的缓存控制。

首先,我们需要创建一个缓存服务,用于存储已经获取过的http响应。可以使用Angular的HttpClientModule来处理缓存。

代码语言:txt
复制
import { Injectable } from '@angular/core';
import { HttpRequest, HttpResponse } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CacheService {
  private cache = new Map<string, HttpResponse<any>>();

  get(req: HttpRequest<any>): HttpResponse<any> | null {
    const url = req.urlWithParams;
    return this.cache.get(url) || null;
  }

  put(req: HttpRequest<any>, res: HttpResponse<any>): void {
    const url = req.urlWithParams;
    this.cache.set(url, res);
  }
}

接下来,我们需要创建一个HttpInterceptor来拦截http请求,并根据需要使用缓存。

代码语言:txt
复制
import { Injectable } from '@angular/core';
import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';
import { CacheService } from './cache.service';

@Injectable()
export class CacheInterceptor implements HttpInterceptor {

  constructor(private cacheService: CacheService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 只对GET请求进行缓存处理
    if (request.method !== 'GET') {
      return next.handle(request);
    }

    // 检查是否有缓存
    const cachedResponse = this.cacheService.get(request);
    if (cachedResponse) {
      return of(cachedResponse);
    }

    // 发送请求并缓存响应
    return next.handle(request).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cacheService.put(request, event);
        }
      })
    );
  }
}

最后,我们需要将自定义的HttpInterceptor注册到Angular的HttpInterceptorProviders中,以便在应用程序中生效。

代码语言:txt
复制
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CacheInterceptor } from './cache.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }
  ]
})
export class InterceptorModule { }

现在,在你的Angular 9应用程序中,只有当navigator在线时,http get请求会被缓存起来。当navigator离线时,将不会使用缓存。

注意:这只是一个简单的示例,实际使用中可能需要更复杂的缓存策略和处理逻辑。另外,腾讯云相关产品中可能没有与此具体问题直接相关的产品和链接。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular HttpClient 拦截器

之前的 Angular 6 HttpClient 快速入门 文章中,我们已经简单介绍了 Http 拦截器。本文将会进一步分析一下 Http 拦截器。拦截器提供了一种用于拦截、修改请求和响应的机制。...在上面的 AuthInterceptor 拦截器中,我们实现的功能就是设置自定义请求头。接下来我们来介绍如何利用拦截器实现请求日志记录的功能。...GET http://jsonplaceholder.typicode.com/users succeeded in 728ms 好的,趁热打铁,我们再来一个例子,即介绍如何利用拦截器实现简单的缓存控制...另外在实际的场景中,我们一般都会为缓存设置一个最大的缓存时间,即缓存的有效期。在有效期内,如果缓存命中,则会直接返回已缓存的响应对象。...此时,我们已经介绍了拦截器三个常见的使用场景,最后我们以 AuthInterceptor 拦截器为例,简单介绍一下如何进行单元测试。

2.6K20

【译】理解Service Worker

如何能提升你的web应用的体验?本文就是来回答这些问题的。 背景 在那个网络还很年轻的时代,很少有人去想一个网页在用户断网的情况下应该有什么样的表现。你就应该一直是在线的。...那么这样,你的SW里能通过监听事件获知所有在你的url根目录里发生的请求。一个如 /js/sw.js 这样的路径只会捕获到 http://localhost:3000/js 下的请求。...Chrome开发者工具里查看缓存数据 Fetch事件 每当网页里产生一个网络请求,都会触发一个fetch事件。...它可以用来查找一个匹配的缓存响应结果。 cache.match 会尝试为一个请求寻找匹配的缓存值。如果没能找到,这个 promise 会得到 undefined 结果。...要讲解如何使用Push API完全可以再写一篇文章,不过基本的套路如下: ? 这是个略微复杂难懂的过程,已经超出这篇文章的讨论范围。不过如果你很感兴趣,可以阅读这篇push消息介绍。

1K30
  • 前端面试知识点

    js的垃圾回收机制 标记清除 引用计数 浏览器缓存机制 Header 内的字段用于控制缓存机制 老方法 Expires,记录的绝对值 新方法 Cache-Control 多了一堆选项,记录的时间是相对值...获取缓存检测缓存是否过期,如果没过期取缓存,优先从内存,其次硬盘,如果过期,则与服务器协商缓存是否仍然可用,如果不可用则获取,可用取缓存 https://juejin.im/entry/5ad86c16f265da505a77dca4...缩短页面加载时间 1、减少http请求 2、使用cdn加速 3、添加Expires头 4、将样式css放在头部,脚本script放在底部 5、使用外部的JavaScript和CSS 实现原生ajax的步骤...dispatcher store redux 框架 view store reducer 异步action 如何进行性能优化 虚拟dom react和vue中的diff算法 angular 模块...组件 服务 管道 什么是依赖注入 如何使用路由 参数快照 参数订阅 响应式编程 angular中的模板式表单和响应式表单 如何做表单验证 angular-cli的使用方式 如何创建组件 创建服务 创建类

    1.6K10

    Service Worker初探

    离线状态下的可用性 不追求返回结果的数据请求中,可以使用Service Worker进行代理。当客户端从离线转为在线的时候,就算已经关闭了页面。...cache.put(url) 如果我们要添加单个缓存可以使用cache.put方法 cache.add(key, value) 缓存一个请求数据的时候,我们希望将缓存和当前的请求想匹配的话。...究竟传入什么参数,取决于如何添加的缓存如果在具体的cache上调用这个方法,就是在当前缓存下去查找,如果在window.caches下调用,就是全局缓存中匹配。...CacheStorage和http缓存的关系 ? 发送http请求的时候,请求会先到达Service Worker。...如果浏览器缓存已过期,请求正式到达服务器。再去判断资源的ETag和Last-Modified有没有发生变化,决定是否使用服务器缓存。 CacheStorage不能取代过去的HTTP缓存

    1.3K20

    精读《浏览器运行 serverRender》

    不需要后端缓存服务,对于千人千面的复杂页面,对后端 ssr 来说缓存规模庞大的无法计算。 相比后端 ssr,在前端可以绕过复杂的权限系统,同时 http 请求的权限问题也无需关心。...像缓存清空时机等问题,前后端 ssr 都会遇到,所以优缺点中。 2 精读 本篇精读分享的是前端 ssr 方案具体实现步骤。...我们先了解整体流程: service worker 拦截首页 service worker 可以浏览器尝试请求首屏 html 之前的时机拦截,此时如果 caches 命中,直接将 response...扔给浏览器,那么服务端将完全不会收到请求,完成了最高效的缓存命中。...当然第一次没有缓存,所以没有命中缓存时,会同步的做两件事: 发送请求,拿到后端返回的 response,扔给浏览器。这是最普通的请求逻辑。

    38740

    HTML5离线应用与客户端存储

    离线检测 要知道设备是否在线还是离线,HTML5 定义了一个 navigator.onLine 属性,这个属性值为 true 表示设备能上网,值为 false 表示设备离线。...来使用了 5: 废弃,即应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存 相关事件: checking: 浏览器为应用缓存查找更新时触发 error: 检查更新或者下载资源期间发生错误时触发...页面新的应用缓存下载完毕且可以通过 swapCache() 使用时触发 cached: 应用缓存完整可用时触发 一般来讲,这些事件会随着页面加载按上述顺序依次触发。...该标准要求服务器对任意 HTTP 请求发送 Set-Cookie HTTP 头信息作为响应的一部分,其中包含会话信息。...然后浏览器 Set-Cookie 的会话信息,之后为每个请求添加 Cookie HTTP 头将信息发送回服务器,如下所示: GET /index.html HTTP/1.1 Cookie: name=

    3.9K10

    angularjs 缓存详解

    cache.get("hello"); remove() : remove() 函数用于找到一个键值对的情况下从缓存中移除它。如果没有找到,它就会返回 undefined 。...如果需要,也可以操作这个默认的 $http 缓存(比如,如果我们发起的另外一个没有缓存请求提醒我们发生了增量变化,我们就可以默认的 $http 请求中清除这个请求)。...为了引用 $http 的默认请求,只需通过 $cacheFactory() 使用ID来获取到该缓存: var cache = $cacheFactory('$http'); 对于所掌控的缓存,我们可以需要时进行所有的正常操作...,这就需要创建一个新的缓存使用 $http 请求。...其实可以模块的 .config() 方法中通过 $httpProvider 设置 $http 默认使用缓存对象。

    1K40

    理解 Service Workers

    它们能做什么,它如何让您的 web 应用更好的表现?本文旨在回答这些问题,以及如何使用 Ember.js 框架来实现 Service Worker。...cache.addAll 将会请求URL 列表中的每一个文件,然后各自的缓存中保存响应,它使用请求的 body 作为每一个缓存数据的 key。查阅 addAll 文档了解更多。 ?...下面的例子演示了一个 '缓存优先' 策略:任何与请求匹配的缓存数据会优先返回,不通过网络请求;只有没有匹配的缓存数据的时候,才会发出网络请求。... fetch 事件的处理中,我们检查了 request 是否满足一些条件(是否是 GET 请求、是否请求的 HTML 内容;是否来源于当前路径等);如果满足这些条件,就返回缓存中的内容。...是因为, Ember 应用总是使用 index.html 渲染。应用程序的根路径下的任何 URL 请求,都会以 index.html 的缓存版本结尾,Ember 应用通常在此接管。

    1.8K21

    你不会还不知道如何监测用户的网络是否在线吧?

    哈哈这确实也是一种情况,但是这只其中一种情况,现实中更多的情况是,用户访问我们的网站时发生断网,这时我们的网站数据已经被浏览器缓存,因此在网站上并看不出有什么不同。...来提高用户的体验感如何检查是否有网络我们可以利用navigator.onLineAPI 来检测网络状态。navigator.onLine会返回一个布尔值来显示用户是否在线。...它通过定期发送网络请求(默认是 AJAX 请求)到预定义的服务器端点来检测用户的在线状态。如果请求成功返回,则用户在线如果请求失败或超时,则用户离线。...离线页面缓存:Offline.js 提供了离线页面缓存的功能,可以将指定的页面内容缓存到本地。当用户离线时,可以使用缓存的离线页面内容来显示,提供更好的离线体验。...它使用一些常见的网络技术和API来实现网络连接状态的检测,例如 AJAX 请求Navigator.onLine 属性等。

    37400

    Angular快速学习笔记(4) -- Observable与RxJS

    HTTP 模块使用可观察对象来处理 AJAX 请求和响应 路由器和表单模块使用可观察对象来监听对用户输入事件的响应 事件发送器 EventEmitter Angular 提供了一个 EventEmitter...例如,http.get(‘/api’) 就会返回可观察对象。 为什么NG使用observable而不是Promise?...反之,你可以使用一系列操作符来按需转换这些值 HTTP 请求是可以通过 unsubscribe() 方法来取消的 请求可以进行配置,以获取进度事件的变化 失败的请求很容易重试 Async 管道 AsyncPipe...防抖(这样才能防止连续按键时每次按键都发起 API 请求,而应该等到按键出现停顿时才发起) 如果输入值没有变化,则不要发起请求(比如按某个字符,然后快速按退格)。...如果已发出的 AJAX 请求的结果会因为后续的修改而变得无效,那就取消它。

    5.1K20

    程序猿的今日头条面试历险记(一)

    这次的面试是小姐姐云南旅行中进行的,目前已经完成了二面,今天这篇文章是对一面的总结,过几天还有对二面的总结。相对来说,今日头条的面试是几个大厂中相对较难的,且看小姐姐如何应对面试。...一面面试官小哥哥人超级 nice,问的问题偏基础,都是常见的前端面试题,由于本人技术栈为 Angular 以及 Vue,因此面试题涉及 React。...,然而直接使用非对称加密的过程本身也不安全,会有中间人篡改公钥的可能性,所以客户端与服务器直接使用公钥,而是使用数字证书签发机构颁发的证书来保证非对称加密过程本身的安全。...项目中遇到跨域问题怎么解决的 JSONP(注意只支持 GET 请求,不支持 POST 请求) CORS //允许所有来源访问 header('Access-Control-Allow-Origin:*'...注册:首先要在 JS 中进行注册 安装:注册完成之后,会触发 install,安装的过程中,如果所有需要离线缓存的静态资源都已经成功缓存,那么 Service Worker 就安装完成进入激活步骤,如果有文件下载失败或缓存失败

    1.1K30

    前端工程师:电信专业转前端是如何拿到阿里、腾讯offer的?

    其他的都挂了 2.面经 阿里-阿里云 1、8.24 讲讲你的整个技术发展过程 那挑一个你认为比较重要的项目仔细讲讲 框架: vue和angular的区别、vue的双向数据绑定如何实现、angular...5、vue和angular的区别 CVTE  9.11 一面: 1、介绍项目 2、vue的数据绑定怎么实现 3、angular和vue的数据绑定怎么实现 4、http缓存策略? 5、https的过程?...7、讲讲ajax跨域怎么做,get和post? 8、为什么存在跨域这个问题?为什么要有同源策略?同源策略是什么?如果没有会有什么问题?...然后接下来hr面 唯品会 9.21 助理前端开发工程师 一面: 1、自我介绍 2、聊项目 3、对于http协议清楚吗? 4、http缓存? 5、断点续传 6、hybrid了解吗?...6、你认为前端的发展什么方向?为什么会往这方面发展? 7、c语言怎么实现字符串转整型 8、浏览器缓存 9、cookie优点和缺点 10、ajax优点和缺点 11、怎么实现拖拽?

    1.4K60

    Angular: 最佳实践

    我们应该为我们数据添加类型限定,下面有些有用的知识点: 使用类型联合和交集。官网解释了如何使用 TS 编译器组合类型以轻松工作。这在处理来自 RESTful API 数据的时非常有用。...我们知道一个路由对应一个 Angular 组件,但是我推荐你使用容器组件,它将处理数据(如果有数据需要传递的话)并将数据传递给另外一个组件,该组件将使用输入所包含的真实视图和 UI 逻辑。...尽可能考虑缓存我们的请求。Rx.js 允许你去缓存 HTTP 请求的结果(实际上,任何的 Observable 都可以,但是我们现在说的是 HTTP 这内容),并且有一些示例你可能想要使用它。...当然,国家不会每天都会发生变更,所以最好的做法就是拉取该数据并缓存,然后应用程序的生命周期内使用缓存的版本,而不是每次都去调用 API 请求该数据。...,以后你不再需要发起另一个 HTTP 请求了。

    2.8K40

    Angular SSR 探究

    例如,服务端应用是无法使用浏览器中的全局对象 window、document、navigator、location。..._document.getElementById('fox-container'); }}使用 URL 绝对地址 Angular SSR 应用中,HTTP 请求的 URL 地址必须为 绝对地址(即,...但是 v14 自动生成的代码中,并没有显式调用这两个方法的代码。而通过读 Http 请求的拦截,也可以达到同样的效果。...这是因为 Angular 使用了动态路由,比如 /product/:id 这种路由,而页面的渲染结果要经过 JS 的执行才能知道,因此,Angular 使用了 Express 作为 Web 服务器,能在服务端运行时根据用户请求...Angular Universal 主要关注将 Angular App 如何进行服务端渲染和生成静态 HTML,对于用户交互复杂的 SPA 并不推荐使用 SSR。

    10.3K51
    领券