Angular2 提供自定义 Http 不起作用

2024-03-21

我们需要一个全局空间来捕获 http 401,403 和 500 响应。我看了一些教程并尝试了扩展 http 的方法。这是我自定义的HTTP(大部分是从网上复制的)

import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response, Headers} from '@angular/http';
import { Router} from '@angular/router';
import { Injectable} from '@angular/core';
import { Observable} from 'rxjs/Rx';

@Injectable()


export class CustomHttp extends Http {

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router : Router) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.request(url, options));
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.get(url, options));
    }

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
    }

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
    }

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.delete(url, options));
    }

    getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        options.headers.append('Content-Type', 'application/json');
        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        return observable.catch((err, source) => {
            console.log('CustomHttp Error status:  ' + err.status);
            return Observable.throw(err); 
        });
    }

}

以下是我如何引导我的应用程序并尝试用我的实现替换默认 HTTP:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS, Http, XHRBackend, RequestOptions} from '@angular/http';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { APP_ROUTER_PROVIDERS  } from './app.routes';
import { provide, PLATFORM_DIRECTIVES} from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { CustomHttp } from './utils/http/customhttp';


    bootstrap(AppComponent, [
        APP_ROUTER_PROVIDERS,
        HTTP_PROVIDERS,
        provide(LocationStrategy, { useClass: HashLocationStrategy }),
        provide(PLATFORM_DIRECTIVES, { useValue: [ROUTER_DIRECTIVES], multi: true }),
        provide( Http, {
            useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) => new CustomHttp(xhrBackend, requestOptions, router),
            deps: [XHRBackend, RequestOptions, Router]
        }),
    ]);

没有编译错误,但是当我尝试发出一些 http 请求时,它使用默认提供程序而不是我的实现。我知道这一点是因为我故意调用一个返回 500 的 webapi 端点,并且没有设置到我的 catch 子句中并编写日志语句。

这是我的 js 依赖项:

 "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "lodash": "4.13.1",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  }

我在这里缺少什么胶水?


确保你没有HTTP_PROVIDERS or Http在某些组件上提供,否则可能会使用它(取决于它的具体提供位置)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2 提供自定义 Http 不起作用 的相关文章

随机推荐

  • 无法删除 MemoryMappedFile 的文件

    以下代码抛出此异常 该进程无法访问文件 filename 因为它正在被另一个进程使用 很公平 但是关闭阅读器和 或 mmf 以便删除文件的正确方法是什么 我认为 MemoryMappedFile 会有一个 close 方法或类似的方法 但事
  • onHashChange 在 Safari 中工作吗?

    Does onHashChange or hashChange在 Safari 中工作 我在 Windows 7 上使用 Safari 4 0 4 进行了测试 但它对我不起作用 如果不起作用 是否有任何解决方案可以跟踪hash已经改变 在我
  • 如何在黑莓中创建选项卡栏应用程序用户界面...?

    如何在 BB 中制作选项卡栏基础应用程序 应用程序的每个屏幕都将有此选项卡 并且每个选项卡将有单独的导航控制器堆栈 以便我们可以轻松地推送屏幕 您必须使用水平字段管理器创建选项卡栏 然后将字段添加到水平字段管理器 然后将管理器设置为屏幕的标
  • 将 DataGrid 列标题居中对齐

    我需要对齐WPF DataGrid Column Header发短信至Center 我创建了一个样式并使用HeaderStyle属性如下 Style
  • Log4Net 不工作

    我正在 Windows XP 中以管理员用户身份使用 C 开发 NET Framework 3 5 并使用 log4net 进行 NET Framework 2 0 二进制引用 我曾尝试过log4net 缺少什么 未创建日志文件 https
  • TCPDF:HTML 表格和分页符

    I am creating a large HTML table and I have problem with page breaks as you can see in the following image Is there a me
  • 获取准确的窗口区域大小 - CreateWindow 窗口大小不是正确的窗口大小

    在尝试用 C 创建窗口并绘制窗口大小与我设置的大小不匹配的矩形时 我注意到一些非常烦人的事情 例如 如果我设置 480x240 窗口并尝试通过获取 GetWindowRect hwnd rect 从上到下 从左到右绘制矩形并计算宽度和高度
  • jQuery Post blob 对象给出 Uncaught TypeError:非法调用

    我正在尝试使用 jQuery 发布文件post 并得到TypeError Illegal invocation function fbUpload token var dataURL canvas toDataURL image jpeg
  • 我的 java 程序正在运行编译但没有显示任何内容

    package myproj import java sql Connection import java sql DriverManager import java sql PreparedStatement import java sq
  • 使用 Javascript 检查测验答案的最安全方法

    在努力完成一个使用 AJAX PHP 设计匹配问答游戏的项目后 我了解到我公司用于分发其产品的学习套件不允许我在后端运行服务器端脚本来安全地检查答案 这都是由于不幸的等级专制造成的 长话短说 我必须以某种方式检查客户端的答案 或找出一些棘手
  • 使用 DinkToPdf 分隔分页符

    我的 Program cs 中有这个 C var page plain var slnpath Directory GetCurrentDirectory var htmlpath slnpath HtmlTemplates page ht
  • Ruby:在代码块中更改类静态方法

    给定 Thread 类及其当前方法 现在在测试中 我想这样做 def test alter current thread Thread current a stubbed method do something that involve t
  • 如果表尚不存在则创建

    我正在尝试创建一个表 如果它尚不存在 我目前正在检查它是否存在于DBA TABLES首先 如果该查询没有返回任何内容 则插入 有没有办法只签入同一条语句 这样我就不必将其分解为单独的查询 这就是我目前所拥有的 BEGIN SELECT CO
  • AWS DynamoDB Objective C 中递增 Number 属性

    我正在努力增加已保存在 DynamoDB 上的表中的项目的数字属性值 我的代码当前是 AWSDynamoDBUpdateItemInput updateItemInput AWSDynamoDBUpdateItemInput new upd
  • PIG 将文本行转换为稀疏向量

    我必须使用 Apache PIG 将需要合并的文件 第一个文件包含书名列表 就像这样 每个书名都单独一行 Ted Dunning Mahout in Action Leo Tolstoy War and Peace Douglas Adam
  • Angular2 中 Http.DELETE 请求的正文

    我正在尝试与 Angular 2 前端的某种 RESTful API 进行交互 要从集合中删除某些项目 除了删除的唯一 id 可以附加到 url 中 之外 我还需要发送一些其他数据 即身份验证令牌 一些集合信息和一些辅助数据 我发现最直接的
  • django m2m_changed 通过模型自定义

    在 Django 中 我确实有两个模型 作者 和 出版 它们与多对多字段连接 以便我可以将不同的作者分配给出版物 此外 我必须使用自定义的贯穿模型 作者身份 来定义正确的顺序 class Author models Model first
  • 我如何在谷歌应用程序引擎上为 html5 创建 websocket

    这是demo http html5demos com web socket一个简单的聊天客户端 您必须在 webkit 浏览器上打开它 例如 chrome 和 Safari 该演示使用基于node js的Web套接字服务器 websocke
  • 错误:ANDROID_HOME 未设置,并且“android”命令不在您的路径中。您必须至少满足其中一项条件。

    我正在尝试安装 PhoneGap 但收到以下错误 错误 ANDROID HOME 未设置 并且 android 命令不在您的路径中 您必须至少满足其中一项条件 错误 截图 我该如何确保 Android 正确设置以与 Cordova 一起使用
  • Angular2 提供自定义 Http 不起作用

    我们需要一个全局空间来捕获 http 401 403 和 500 响应 我看了一些教程并尝试了扩展 http 的方法 这是我自定义的HTTP 大部分是从网上复制的 import Http ConnectionBackend Request