如何 运行 加载程序，直到从 Ionic 4 中的 API 获取响应

Question

我正在我的 Ionic 4 应用程序中工作，我正在从 API 获取响应。我还将加载程序添加到响应来自 API 的首页。

我想 运行 加载程序，直到未从 API 获取响应。

这是我的tab1.page.ts:

import { Component, OnInit } from '@angular/core';
import { ChakapiService } from './../service/chakapi.service';
import { LoadingController, Events } from '@ionic/angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {
  detu: any;
  newda: any;
  constructor(public chakapi: ChakapiService, public loadingController: LoadingController, public events: Events,
    private storage: Storage) {
    this.detailsfetch('en');
  }
  ngOnInit() {
  }
  async detailsfetch($langselect) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      duration: 2200,
      translucent: true,
    });
    await loading.present();
    this.chakapi.getdetails($langselect).subscribe(data => {
      this.detu = data;
      this.newda = this.detu.data;
    });
    return await loading.onDidDismiss();
  }
}

在此，我从 API 获取响应，并且我添加了加载器，但加载器在定义的时间内 运行ning。

我想 运行 加载程序，直到未从 API 获取响应。

非常感谢任何帮助。

Answer 1

删除加载程序中的 duration 属性，并在您的服务器调用订阅中添加 loader.dismiss()

async detailsfetch($langselect) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      translucent: true,
    });
    await loading.present();
    this.chakapi.getdetails($langselect).subscribe(data => {
      this.detu = data;
      this.newda = this.detu.data;
      loading.dismiss();
    }, error => { loading.dismiss(); });

  }

Answer 2

这是使用 try catch 块 处理成功和错误响应情况的登录示例。加载程序等待来自服务器的响应，如果收到响应或发生某些错误则停止

async login() {
    console.log('login' + this.loginForm.get('username').value);
    try {
      const loading = await this.presentLoading(); // start loader
      const res = await this.authService.login({
        username: this.loginForm.get('username').value,
        password: this.loginForm.get('password').value
      });
      this.loadingController.dismiss();            // stop loader on successfull response
    } catch (error) {
      this.loadingController.dismiss();            // stop loader on some error
      if (error === 0) {
        this.presentToast('Invalid username password');
      } else {
        this.presentToast('Some Error Occured, Please try again');
      }
    }
  }

这是加载方法

  async presentLoading() {
    console.log('starting loading');
     const loading = await this.loadingController.create({
      spinner: 'circles',
      keyboardClose: true,
      message: 'Logging you in, Please Wait'
    });
    return await loading.present();
  }