在 Ionic 2 应用程序中使用自定义 Http 服务

Question

我想对 Ionic 2 应用程序 (v2.0.0-beta.30) 中的每个 HTTP 请求做一些事情，所以我创建了自己的 Http 类来扩展 angular 的服务。像这样的：

@Injectable()
export class myHttp extends Http
{
    private myStuff(): void
    {
        //stuff to fo every request
    }

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

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

我有东西当前在Http 上调用函数，我不想更改所有东西来调用MyHttp。我希望任何发出请求的东西都不知道也不关心它实际上是在调用MyHttp。似乎应该有一种方法可以提供 MyHttp 而不是 Http，我只是不确定你会在哪里使用 Ionic 2 应用程序。

我尝试像这样添加ionicBootstrap 函数：

ionicBootstrap(MyApp, [new ProviderBuilder(Http).toClass(MyHttp)], {});

这只是给了我死亡的白屏。我还尝试添加到 MyApp 类的 @Component 装饰器，如下所示：

@Component({
    providers: [new ProviderBuilder(Http).toClass(MyHttp)],
    templateUrl: "build/app.html"
})

这会产生相同的白屏。我不确定我是否理解其中的区别，我尝试了toAlias 而不是toClass，结果相同。

当任何东西想注入Http时，我如何告诉注入器注入MyHttp？

-------- 更新 -----------

我终于通过在提供程序数组中包含HTTP_PROVIDERS 来绕过死亡白屏。但是，它仍然在使用它的其他服务中注入Http 而不是MyHttp。我已经尝试了以下各项：

{ provide: Http, useClass: MyHttp }
provide(Http, {useClass: myHttp })
new ProviderBuilder(Http).toClass(MyHttp)

依赖Http的服务如下所示：

public constructor(http: Http)
{
    //...
}

我在这里放了一个调试器，我可以看到它是 angular 的 Http 而不是 MyHttp。

-------- 更新 2 -----------

我尝试在不同的班级做同样的事情，我确实看到它有效。例如：

ionicBootstrap(MyApp, [new ProviderBuilder(MyOtherClass).toClass(MyOtherClass2)], {});

我看到MyOtherClass2 在请求MyOtherClass 时被注入。所以，我不知道我是否在MyHttp 中做错了什么，或者Http 是否存在一些错误。有没有人能够使用Http 成功做到这一点？

Answer 1

就像你可以阅读here一样，当你像这样注册provider时：

// bootstrap
ionicBootstrap(MyApp, [DataService]);

// component
@Component({
  ...
  providers: [DataService]
})
class AppComponent { }

您使用的是快捷方式，而不是这样写：

// at bootstrap
ionicBootstrap(MyApp, [
  provide(DataService, {useClass: DataService})
]);

// or in component
@Component({
  ...
  providers: [
    provide(DataService, {useClass: DataService})
  ]
})
class AppComponent { }

您可以使用该快捷方式，因为它的值与令牌相同。所以在你的情况下，你必须这样做：

// at bootstrap
ionicBootstrap(MyApp, [
  provide(Http, { useClass: myHttp })
]);

// or in component
@Component({
  ...
  providers: [
    provide(Http, {useClass: myHttp })
  ]
})
class AppComponent { }

请记住，如果您将其添加到 Component，每次加载该组件时都会创建该服务的新实例。如果您想在整个应用程序中使用相同的实例（单例），您必须将其添加到 ionicBootstrap 或 top-most Component来自您的应用。

Answer 2

这对我有用：

你的 myHttp 应该从构造函数开始：

@Injectable()
export class myHttp extends Http{
...
    constructor(
        xhrBackend: XHRBackend,
        requestOptions: RequestOptions) {
        super(xhrBackend, requestOptions);
    }

在您的 app.module.ts 中，您应该将您的提供程序导入为：

import { Http, XHRBackend, RequestOptions } from '@angular/http';
...

@NgModule({
  ...
  providers: [
    {
      provide: Http,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
        return new myHttp(backend, defaultOptions);
      },
      deps: [XHRBackend, RequestOptions]
    }

  ]

Answer 3

你不能使用[new...]，你可以试试{ provide: Http, useClass: MyHttp } 它将是ionicBootstrap(MyApp, [{ provide: Http, useClass: MyHttp }], {});