Ionic4 Angular项目中如何在HTTP请求响应中使用ion-loading

嘿，我帮你把Ionic 3的加载提示方案适配到Ionic 4里～其实核心逻辑没变，但Ionic 4的组件调用方式有小调整，下面是一步步的实现方法：

1. 先做一个通用的加载服务（推荐复用） #

多个页面/组件都可能用到加载提示，做个服务能避免重复代码。

先通过命令生成服务：

ionic generate service services/loading

然后在服务里编写加载的控制逻辑：

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

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  private loading: HTMLIonLoadingElement;

  constructor(private loadingCtrl: LoadingController) { }

  // 显示加载框
  async present(message = '加载中...') {
    this.loading = await this.loadingCtrl.create({
      message,
      spinner: 'circles' // 可选，自定义加载动画样式
    });
    await this.loading.present();
  }

  // 关闭加载框
  async dismiss() {
    if (this.loading) {
      await this.loading.dismiss();
    }
  }
}

2. 在HTTP请求中集成加载服务 #

假设你用Angular的HttpClient发起请求，在你的数据服务里这样写：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoadingService } from './services/loading.service';
import { catchError, finalize } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(
    private http: HttpClient,
    private loadingService: LoadingService
  ) { }

  fetchTargetData() {
    // 请求发起前显示加载框
    this.loadingService.present();

    return this.http.get('你的API接口地址')
      .pipe(
        // 关键：不管请求成功/失败，最终都关闭加载框
        finalize(() => this.loadingService.dismiss()),
        catchError(error => {
          // 这里可以添加错误处理逻辑，比如提示用户
          console.error('请求出错:', error);
          return throwError(() => new Error('加载失败，请稍后重试'));
        })
      );
  }
}

3. 在页面组件中调用数据服务 #

比如在首页组件里使用：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data.service';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  pageData: any;

  constructor(
    private dataService: DataService,
    private toastCtrl: ToastController
  ) {}

  ngOnInit() {
    this.loadPageData();
  }

  loadPageData() {
    this.dataService.fetchTargetData().subscribe({
      next: (response) => {
        this.pageData = response;
        // 处理返回的业务数据
      },
      error: async (err) => {
        // 错误提示示例：用Ionic Toast
        const toast = await this.toastCtrl.create({
          message: err.message,
          duration: 2000,
          color: 'danger'
        });
        await toast.present();
      }
    });
  }
}

关键注意点 #

• 一定要用finalize操作符关闭加载框，确保请求无论成功失败都能隐藏加载，避免出现加载框卡死的情况。
• Ionic 4的LoadingController返回的是Promise，所以必须用async/await处理创建和显示逻辑，这是和Ionic 3最主要的区别。
• 如果只是单个页面需要加载提示，也可以直接在组件里注入LoadingController，但服务的复用性更强，更推荐前者。

内容的提问来源于stack exchange，提问作者gausmohammad