首页 > 其他分享 >Angular HTTPInterceptor 的使用一例

Angular HTTPInterceptor 的使用一例

时间:2023-06-24 10:33:00浏览次数:41  
标签:拦截器 HTTP 请求 一例 intercept import 方法 Angular HTTPInterceptor

假设你有一个 Angular 应用程序,其中有一个组件需要从服务器获取特定模型的数据。你可以使用上述方法将一个名为queryProductModel的查询参数添加到请求中,以便服务器能够根据该参数返回相应的模型数据。

首先,你需要创建一个实现HttpInterceptor接口的拦截器。以下是一个示例的拦截器代码:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class queryProductModelInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const modifiedRequest = request.clone({
      setParams: {
        queryProductModel: 'true'
      }
    });

    return next.handle(modifiedRequest);
  }
}

接下来,你需要将拦截器注册到你的 Angular 应用程序中。你可以在根模块的提供商(providers)数组中注册该拦截器,如下所示:

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { queryProductModelInterceptor } from './query-product-model.interceptor';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: queryProductModelInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

在上述示例中,我们将queryProductModelInterceptor拦截器注册为HTTP_INTERCEPTORS提供商,并将multi属性设置为true,以确保不覆盖其他已注册的拦截器。

现在,当你的组件通过 Angular 的 HTTP 客户端发送请求时,拦截器将在请求发出之前修改请求并添加queryProductModel=true的查询参数。

假设你的组件中有一个使用HttpClient进行数据请求的方法,示例如下:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="getData()">Get Data</button>
  `
})
export class MyComponent {
  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('https://example.com/api/data').subscribe(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

当你点击"Get Data"按钮时,getData()方法将发送一个 HTTP GET 请求到https://example.com/api/data。由于我们已经注册了queryProductModelInterceptor拦截器,该拦截器将修改请求并添加queryProductModelModel=true的查询参数。

在 Chrome 开发者工具中,你可以观察到实际发送的 HTTP 请求的 URL 是https://example.com/api/data?queryProductModel=true。这意味着拦截器成功地将查询参数添加到了请求中,并且该参数将被发送到服务器以获取相应的模型数据。

请注意,示例中的 URL(https://example.com/api/data)只是一个占位符,你需要将其替换为实际的服务器端点 URL,以确保请求能够到达正确的服务器。

在 Angular 的 HttpInterceptor 接口中,intercepthandleRequest 方法各自具有不同的作用。

  1. intercept 方法:
  • intercept 方法是 HttpInterceptor 接口的核心方法之一。
  • 该方法用于拦截传出的 HTTP 请求和传入的 HTTP 响应,并对它们进行处理或修改。
  • intercept 方法中,你可以访问到原始的请求对象和请求处理器对象,可以修改请求的头部、URL、参数等,并且可以添加、删除或修改请求的拦截器。
  • 你可以在 intercept 方法中执行一些额外的逻辑,如添加身份验证信息、处理错误、记录日志等。
  • 最后,你需要调用 next.handle(request) 将修改后的请求传递给下一个拦截器或最终的请求处理器。
  1. handleRequest 方法:
  • handleRequest 方法是请求处理器(request handler)的一部分,用于处理最终的 HTTP 请求。
  • intercept 方法中的最后一步,你需要调用 next.handle(request),这将触发 handleRequest 方法的执行。
  • handleRequest 方法将接收到经过拦截器链处理后的最终请求对象,并处理该请求,发送它到服务器并等待响应。
  • 你可以在 handleRequest 方法中执行一些与请求和响应相关的操作,例如发送请求、处理响应、处理错误等。
  • handleRequest 方法返回一个 Observable 对象,用于订阅响应并对其进行处理。

综上所述,intercept 方法用于拦截和修改传出的 HTTP 请求,并在最后调用 next.handle(request) 将修改后的请求传递给下一个拦截器或最终的请求处理器。而 handleRequest 方法则负责实际处理最终的 HTTP 请求,并返回一个可观察对象以进行响应的处理。

通过这两个方法的组合使用,你可以在 Angular 中的 HTTP 拦截器中实现对请求和响应的拦截、修改和处理,以及执行额外的逻辑操作。

标签:拦截器,HTTP,请求,一例,intercept,import,方法,Angular,HTTPInterceptor
From: https://blog.51cto.com/jerrywangsap/6540964

相关文章

  • Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
    最近处理客户incident,有个客户从Spartacus4升级到5.2之后,启动Storefront,console遇到了一个错误消息:NullInjectorError-NoproviderforAnonymousConsentTemplatesAdapter!引起这个错误消息的场景有很多,这个incident最后的场景是:以前的module通过loadedfor......
  • Angular HTTPInterceptor 的使用一例
    假设你有一个Angular应用程序,其中有一个组件需要从服务器获取特定模型的数据。你可以使用上述方法将一个名为queryProductModel的查询参数添加到请求中,以便服务器能够根据该参数返回相应的模型数据。首先,你需要创建一个实现HttpInterceptor接口的拦截器。以下是一个示例的拦截......
  • Angular中的HTTP请求】- 拦截器 HttpInterceptor 详解
    原文: 【Angular中的HTTP请求】-拦截器HttpInterceptor详解__老杨_的博客-CSDN博客通过学习HttpClient的工作机制,我们知道对于HTTP请求,HttpClient实际上是构建了一个链式的处理流程: 在HttpBackend的处理流程中请求被发出。在HttpBackend的前面可以设置多个的拦截器,对请......
  • window下安装docker并运行angular项目
    window下安装docker并运行angular项目1、使用场景本地有一个node项目,node版本是v16.13.2,在本地安装的angular是15.2.4但是测试服上面的node版本是14.19.3,angular是1.0.0-beta.28.3,会导致angular项目的ngbuild打包不了。但是不能升级版本,因为这个测试服务器上面的东西也......
  • window下安装docker并运行angular项目
    window下安装docker并运行angular项目1、使用场景本地有一个node项目,node版本是v16.13.2,在本地安装的angular是15.2.4但是测试服上面的node版本是14.19.3,angular是1.0.0-beta.28.3,会导致angular项目的ngbuild打包不了。但是不能升级版本,因为这个测试服务器上面的东西也......
  • 看看Angular有啥新玩法!手把手教你在Angular15中集成Excel报表插件
    Angular15新特性Angular框架(以下简称“Angular”)作为一款由谷歌开发的Web应用程序框架,其强大的依赖注入系统、可重复使用的模块化开发理念和响应式编程模式等特点让Angular一问世便取得了巨大的关注和流量。截止目前为止,Angular已经迭代了15个版本,而Angular15又有哪些新的亮眼表现......
  • 详解Angular路由之子路由
    原文:https://www.jb51.net/article/213074.htm一、子路由语法二、实例1、新建2个组件修改其内容2、修改路由配置3、修改product.component.ts的模版一、子路由语法二、实例在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息。通过子路由实现商品......
  • Angular6 教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介Angular6是一个JavaScript框架,用于构建JavaScript,html和TypeScript中的Web应用程序和应用程序,它是JavaScript的超集。它是Angular的一个更新版本,相当于angular的6.x版本。Angular6入门教程-从基本到高级概念的简单的步骤了解Angular6,其中包括概述,环境设置,项目设置,......
  • 如何保护Angular应用?这篇文章告诉你答案!
    Angular应用现在很火,但它的安全问题尤为突出。因为开发者不仅要保护应用程序,还要保护到服务器连接。本文将告诉您如何保证Angular应用的安全,以及如何避免应用中的潜在漏洞。PS:给大家推荐一个实用组件~KendoUIforAngular是专业级的AngularUI组件库,不仅是将其他供应商提供的现......
  • 看看Angular有啥新玩法!手把手教你在Angular15中集成报表插件
    摘要:本文由葡萄城技术团队于博客园原创并首发。葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。Angular15新特性Angular框架(以下简称“Angular”)作为一款由谷歌开发的Web应用程序框架,其强大的依赖注入系统、可重复使用的模块化开发理念和响应式编程模式等特点......