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中获取响应，并添加了加载程序，但是加载程序已运行了规定的时间。

我想运行加载程序，直到未从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 block 的登录示例，该示例同时处理成功和错误情况下的响应。加载程序等待来自服务器的响应，并在收到响应或发生某些错误时停止

getUrlVars()["YourParameterInQueryString"]

这是loadinng方法

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');
      }
    }
  }

在Ionic 4中从API获取响应之前，如何运行加载程序

2 个答案: