离子3角4 HTTP拦截器显示每个请求加载

我想要做一个自定义http拦截器，将用于处理加载和其他附加功能。（手动处理每个请求的加载会显着增加代码量）。离子3角4 HTTP拦截器显示每个请求加载

的问题是：装载机是越来越对每个请求激活，但loading.dismiss()不工作（加载微调保持活跃，没有错误）

我的配置：

HTTP拦截：

@Injectable() 
export class MyHttpWrapper extends Http { 
    private loading: any; 

    constructor(connectionBackend: ConnectionBackend, requestOptions: RequestOptions,private loadingCtrl: LoadingController) { 
    super(connectionBackend, requestOptions); 
    } 

    public get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    this.showLoader(); 

    return super.get(url, this.getRequestOptionArgs(options)) 
     .finally<Response>(() => { 
     this.hideLoader(); 
     }); 
    } 

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

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

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


    private 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; 
    } 


    private showLoader() { 
    if(!this.loading){ 
     this.loading = this.loadingCtrl.create({ 
     dismissOnPageChange: true 
     }); 
    } 
    this.loading.present(); 
    console.log('show loader') 
    } 
    private hideLoader() { 
    console.log('hide loader') 
    console.log(this.loading) 
    this.loading.dismiss(); 
    } 
}

app.module.ts

export function httpInterceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions, loadingCtrl: LoadingController) { 
    return new MyHttpWrapper(xhrBackend, requestOptions, loadingCtrl); 
} 
    @NgModule({ 
     declarations: [ 
     MyApp 
     ], 
     imports: [ 
     BrowserModule, 
     HttpModule, 
     IonicModule.forRoot(MyApp), 
     IonicStorageModule.forRoot() 
     ], 
     bootstrap: [IonicApp], 
     entryComponents: [ 
     MyApp 
     ], 
     providers: [ 
     StatusBar, 
     SplashScreen, 
     {provide: ErrorHandler, useClass: IonicErrorHandler}, 
     {provide: APP_CONFIG, useValue: AppConfig}, 
     { 
      provide: Http, 
      useFactory: httpInterceptorFactory, 
      deps: [XHRBackend, RequestOptions, LoadingController] 
     } 
     ] 
    }) 
    export class AppModule {}

UPDATE：

尝试添加简单的服务（和MyHttpWrapper使用），不会改变任何东西，同样的问题。

@Injectable() 
export class LoadingService { 
    private loading:any; 

    constructor(private loadingCtrl: LoadingController) { 

    } 

    show() { 
    if(!this.loading){ 
     this.loading = this.loadingCtrl.create({ 
     dismissOnPageChange: true 
     }); 
    } 
    this.loading.present(); 
    } 
    hide() { 
    if (this.loading) { 
     this.loading.dismiss(); 
    } 
    } 
}

来源

2017-08-01 user1935987

尝试'私人静态加载：任何;' – Duannx

相同。实际上我认为那不是很正确 - 每个类的实例必须具有此属性作为唯一 – user1935987

我认为一次只需要一个实例，因为您应该一次显示一个加载。尝试应用[单例模式]（https://en.wikipedia.org/wiki/Singleton_pattern）仅在一次存档“MyHttpWrapper”的一个实例 – Duannx

我使用下面的自定义HTTP拦截在我的离子3应用

这是loader.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { LoadingController } from 'ionic-angular'; 

@Injectable() 
export class LoaderProvider { 

    constructor(public http: Http, public loadingCtrl: LoadingController) { 

    } 

    loading: any = this.loadingCtrl.create({ 
    content: "Please wait..." 
    }) 

    show() { 
    this.loading.present(); 
    } 

    hide() { 
    this.loading.dismiss(); 
    } 


}

这是HTTP拦截

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/Rx'; 

import { LoaderProvider } from '../loader/loader'; 

/* 

Ionic 3 HTTP interceptor 
Author: iSanjayAchar (@iSanjayAchar) <[email protected]> 

*/ 

@Injectable() 

export class httpService { 

    baseUrl: string = 'https://yourbaseurl.in' 

    constructor(public http: Http, private loader: LoaderProvider) { 

    } 

    get(url) { 
    this.loader.show(); 
    return this.http.get(this.baseUrl + url) 
     .map(resp => resp.json()) 
     .finally(() => { 
     this.loader.hide(); 
     }); 
    } 

    post(url, body) { 
    this.loader.show(); 
    return this.http.post(this.baseUrl + url, body) 
     .map(resp => resp.json()) 
     .finally(() => { 
     this.loader.hide(); 
     }); 
    } 

    put(url, body) { 
    this.loader.show(); 
    return this.http.put(this.baseUrl + url, body) 
     .map(resp => resp.json()) 
     .finally(() => { 
     this.loader.hide(); 
     }); 
    } 

    delete(url) { 
    this.loader.show(); 
    return this.http.delete(this.baseUrl + url) 
     .map(resp => resp.json()) 
     .finally(() => { 
     this.loader.hide(); 
     }); 
    } 

    patch(url, body) { 
    this.loader.show(); 
    return this.http.patch(this.baseUrl + url, body) 
     .map(resp => resp.json()) 
     .finally(() => { 
     this.loader.hide(); 
     }); 
    } 
}

现在最后导入这个而不是http无处不在，例如

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 
import { ToastController } from 'ionic-angular'; 
import 'rxjs/add/operator/map'; 
import { AlertController } from 'ionic-angular'; 
import { httpService } from '../../providers/http/http'; 

/** 
* Generated class for the LoginPage page. 
* 
* See http://ionicframework.com/docs/components/#navigation for more info 
* on Ionic pages and navigation. 
*/ 

@IonicPage() 

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html', 
}) 

export class LoginPage { 
    isLoginIn: boolean = false; 

    user: any = { 
    email: '', 
    password: '' 
    } 


    constructor(private http: httpService, private toast: ToastController) { 

    } 

login() { 

    this.http.post('/api/v1/login/', this.user) 
     .subscribe(resp => { 

      //Your logic 

     }, err => { 

     //Your logic 

     } 
    } 
}

来源

2017-08-06 16:56:53

离子3角4 HTTP拦截器显示每个请求加载

回答

相关问题