如何在 Ionic 4 中处理两个调用和加载控制器

Question

我有一个要求，我有 2 个 API 调用，我希望第一个请求的前两个调用在那里。 当导航回来时，第二个 API 调用在那里。 我打电话一日API ngOnInit网络挂接和第二API上ionViewWillEnter网络挂接。

我面临的问题是，当两个请求同时完成时，我的加载程序有时不会被解除。

所以我想的可能解决方案是，如果我可以在第一次加载时同步调用两个 API，然后每次单击后退按钮时调用另一个 API。

注意：我在拦截器中使用加载器。

代码：对于拦截器

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // Clone the request to add the new header.
        const authReq = req.clone();
        this.showLoading();

        // send the newly created request
        return next.handle(authReq).pipe(catchError((error) => {
            if (error.status === 401) {
                this._navCtrl.navigateForward('/login');
            }
            return throwError(error);
        }), finalize( () => {
            console.log('hi');
            this.dismissLoading();
          })
        );
    }

编辑：

显示加载器和隐藏加载器的代码：

    async showLoading() {
        return await this._loadingCtrl.create().then(a => {
            a.present();
        });
    }

    async dismissLoading() {
        return await this._loadingCtrl.dismiss();
    }

Answer 1

就我而言，我将创建一个LoaderService来自己处理加载。 特别的是我将创建一个名为isShowing的标志，所以如果加载已经显示，我们只需要再次调用presentLoader函数来更新加载消息。 您的屏幕上只会显示一个正在加载的弹出窗口。

在您的情况下，我不建议在 HTTP 拦截器中显示加载器，因为我们无法在那里处理 HTTP 调用堆栈。 只需创建一个新函数，该函数结合所有必要的 API 调用，并在您开始/完成数据处理时显示/关闭弹出窗口。

import { LoadingController } from '@ionic/angular';
import { Injectable } from '@angular/core';

@Injectable()
export class LoaderService {
    private loading: HTMLIonLoadingElement;
    private isShowing = false;

    constructor(private loadingController: LoadingController) {}

    public async presentLoader(message: string): Promise<void> {
        if (!this.isShowing) {
            this.loading = await this.loadingController.create({
                message: message
            });
            this.isShowing = true;
            return await this.loading.present();
        } else {
            // If loader is showing, only change text, won't create a new loader.
            this.isShowing = true;
            this.loading.message = message;
        }
    }

    public async dismissLoader(): Promise<void> {
        if (this.loading && this.isShowing) {
            this.isShowing = false;
            await this.loading.dismiss();
        }
    }
}

Answer 2

1. 简单的解决方案是在单击 bak 按钮时进行函数调用，并且在函数内部可以进行 API 调用。
2. 您可以使用 ionViewWillEnter，而不是链接到后退按钮，它会在您即将离开页面时调用，但缺点是每次更改视图时都会调用它，而不管事实是仅在单击后退按钮时。

您还应该检查您的服务是否为单例，并且它创建了一个 ionic-loader 实例。 我认为在您的情况下，正在创建不止一个 loader 实例。

此外，而不是调用拦截装载机，你可以调用showLoading()在ionViewWillEnter和hideLoading()在ionViewDidEnter()您的网页。

您可以创建一个 Singleton Loader Service，如下所示。 此服务将只负责创建 ionic loader 的单个实例。

import { Injectable } from '@angular/core';

import { LoadingController } from '@ionic/angular';

@Injectable({
    providedIn: 'root'
})
export class LoaderService {
    private loader: HTMLIonLoadingElement;

    constructor(private loadingController: LoadingController) {}

    async showLoader() {
        if (!this.loader) {
            this.loader = await this.loadingController.create({ message: 'Loading' });
        }
        await this.loader.present();
    }

    async hideLoader() {
        if (this.loader) {
            await this.loader.dismiss();
            this.loader = null;
        }
    }
}

Answer 3

   private loading: HTMLIonLoadingElement;
     constructor(public loadingController: LoadingController) { }

     public async show(): Promise<void> {
       return await this.loadingController.create({
         message: 'Please wait...',
         spinner: 'crescent'
       }).then(a => {
         a.present().then(() => {
           console.log('presented');
         });
       });
     }

       return await this.loadingController.dismiss().then(() =>               
    console.log('dismissed'));
      }`enter code here`