Ionic 3中点击注册按钮后如何在HTTP请求时显示加载图标并响应后隐藏？

嘿，这事儿很简单，咱们用Ionic自带的工具就能轻松搞定两种常见的加载提示方式，你可以按需选择：

方法一：弹窗式加载提示（推荐） #

这种方式会在屏幕中央弹出一个加载弹窗，直到请求完成才消失，用户体验直观清晰。

步骤1：导入并注入LoadingController #

在signup.ts顶部导入LoadingController，然后在构造函数里注入它：

import { LoadingController } from 'ionic-angular';
// 保留你已有的其他导入，比如AuthServiceProvider、NavCtrl、HomePage等

export class SignupPage {
  userData: any;
  responseData: any;

  constructor(
    private authServiceProvider: AuthServiceProvider,
    private navCtrl: NavController,
    private loadingCtrl: LoadingController // 新增这行，注入加载控制器
  ) {}

  // 修改后的signup方法
  async signup() {
    // 创建加载弹窗，自定义提示文本
    const loading = await this.loadingCtrl.create({
      content: '正在提交注册信息...'
    });
    // 显示弹窗
    await loading.present();

    try {
      // 发起注册请求
      const result = await this.authServiceProvider.postData(this.userData, "signup");
      this.responseData = result;
      console.log(this.responseData);

      // 处理响应逻辑
      if (JSON.stringify(this.responseData._body) !== "") {
        this.navCtrl.setRoot(HomePage);
      } else {
        console.log("User already exists");
      }
    } catch (err) {
      // 捕获请求错误
      console.log("something went wrong", err);
    } finally {
      // 不管成功还是失败，都关闭加载弹窗
      loading.dismiss();
    }
  }
}

方法二：按钮内加载状态 #

如果不想用弹窗，想让按钮本身变成加载状态（禁用按钮+显示加载图标），可以这么做：

步骤1：修改sign.html的按钮代码 #

给按钮添加禁用状态判断，同时根据加载状态切换显示加载图标或原文字：

<button 
  ion-button 
  color="danger" 
  block 
  outline 
  (click)="signup()" 
  [disabled]="isLoading"
>
  <ion-spinner *ngIf="isLoading" name="dots" class="spinner-small"></ion-spinner>
  <span *ngIf="!isLoading">Signup</span>
</button>

可以给加载图标加个小样式调整大小，在对应的SCSS文件里：

.spinner-small {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

步骤2：修改signup.ts的代码 #

添加状态变量控制加载状态，然后更新signup方法：

export class SignupPage {
  userData: any;
  responseData: any;
  isLoading = false; // 新增状态变量

  constructor(
    private authServiceProvider: AuthServiceProvider,
    private navCtrl: NavController
  ) {}

  async signup() {
    this.isLoading = true;

    try {
      const result = await this.authServiceProvider.postData(this.userData, "signup");
      this.responseData = result;
      console.log(this.responseData);

      if (JSON.stringify(this.responseData._body) !== "") {
        this.navCtrl.setRoot(HomePage);
      } else {
        console.log("User already exists");
      }
    } catch (err) {
      console.log("something went wrong", err);
    } finally {
      this.isLoading = false;
    }
  }
}

小提醒 #

我把原来的then/catch改成了async/await，代码更易读；如果你习惯用Promise链式调用，也可以在then和catch分支里分别关闭加载状态，效果是一样的。一定要确保加载状态在所有分支（成功、失败）都能被关闭，避免出现加载状态一直卡住的情况，用finally是最稳妥的方式。

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