加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular2提供自定义Http不工作

发布时间:2020-12-17 17:07:47 所属栏目:安全 来源:网络整理
导读:我们需要一个全局空间来捕获http 401,403和500个响应.我查看了一些教程并尝试了扩展http的方法.这是我的自定义HTTP(主要是从在线复制) import { Http,ConnectionBackend,Request,RequestOptions,RequestOptionsArgs,Response,Headers} from '@angular/http';
我们需要一个全局空间来捕获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,options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.put(url,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,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或Http,否则可能会使用它(取决于提供的确切位置).

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读