Angular/Ionic中如何统一控制服务调用加载器显隐及前置执行函数？

在Angular/Ionic中，你可以通过封装通用HTTP请求方法的方式，实现每次服务调用自动显示/隐藏加载器，不用在每个接口函数里重复写加载器逻辑。下面是具体的实现步骤和修改后的代码：

步骤说明 #

1. 注入Ionic的LoadingController到你的HttpProvider中，用于创建和管理加载器。
2. 编写一个私有通用请求方法，在这个方法里统一处理加载器的显示、HTTP请求发送、以及请求完成后加载器的隐藏（不管请求成功还是失败）。
3. 将原来的各个接口函数替换为调用这个通用方法，这样所有HTTP请求都会自动触发加载器逻辑。

修改后的完整代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoadingController } from '@ionic/angular'; // 引入LoadingController
import { finalize } from 'rxjs/operators'; // 引入rxjs的finalize操作符

@Injectable()
export class HttpProvider {
  BASEURL: string = 'https://www.ngrok.io';

  constructor(
    public http: HttpClient,
    private loadingCtrl: LoadingController // 注入LoadingController
  ) {
    console.log('Hello HttpProvider Provider');
  }

  // 通用请求方法：统一处理加载器和HTTP请求
  private async request(method: string, endpoint: string, body?: any) {
    // 显示加载器
    const loading = await this.loadingCtrl.create({
      message: '加载中...', // 可自定义加载提示文本
      spinner: 'circles' // 可自定义加载动画样式
    });
    await loading.present();

    // 发起HTTP请求，用finalize确保请求完成后隐藏加载器
    return this.http.request(method, `${this.BASEURL}${endpoint}`, { body })
      .pipe(
        finalize(() => {
          loading.dismiss(); // 请求结束（成功/失败）都隐藏加载器
        })
      );
  }

  // 以下是修改后的各个接口函数，全部调用通用request方法
  getCustomerInfo(customer_mobile) {
    return this.request('POST', '/customer/get', { customer_mobile });
  }

  addNewCustomer(customerInfo) {
    return this.request('POST', '/customer/save', customerInfo);
  }

  updateCustomer(customerInfo) {
    return this.request('POST', '/customer/update', customerInfo);
  }

  getVendorList(filterObject) {
    return this.request('POST', '/getvendorlist', filterObject);
  }

  getVendorInfo(vendor_id) {
    return this.request('POST', '/getvendorinfo', { vendor_id });
  }

  updateAddress(updatedAddress) {
    return this.request('POST', '/customeraddress/update', updatedAddress);
  }

  addAddress(newAddress) {
    return this.request('POST', '/customeraddress/save', newAddress);
  }

  addOrder(orderDetails) {
    return this.request('POST', '/order/save', orderDetails);
  }

  deleteAddress(address_id) {
    return this.request('POST', '/customeraddress/delete', { address_id });
  }

  getOrderList(customer_id, date?) {
    const requestBody = { customer_id, date }; // 补充原代码中缺失的requestBody定义
    return this.request('POST', '/fetchallcustomerorders', requestBody);
  }

  addReview(review: { feedback: string; rating: string; order_id: string }) {
    return this.request('POST', '/orderreview', review);
  }
}

关键细节说明 #

• finalize操作符：这个rxjs操作符会在Observable完成（无论是成功返回数据还是抛出错误）时执行回调，确保加载器一定会被隐藏，避免出现加载器一直停留在页面上的情况。
• 异步创建加载器：因为loadingCtrl.create()返回的是Promise，所以用async/await来确保加载器完全显示后再发起HTTP请求，逻辑更顺畅。
• 通用方法的灵活性：这个request方法支持不同的HTTP方法（GET/POST/PUT等），如果后续需要添加GET请求，直接调用this.request('GET', '/xxx')即可，同样会自动处理加载器。

如果需要更灵活的控制（比如某些请求不需要显示加载器），可以给request方法加一个可选参数：

private async request(method: string, endpoint: string, body?: any, showLoader: boolean = true) {
  let loading;
  if (showLoader) {
    loading = await this.loadingCtrl.create({ message: '加载中...' });
    await loading.present();
  }

  return this.http.request(method, `${this.BASEURL}${endpoint}`, { body })
    .pipe(
      finalize(() => {
        if (loading) loading.dismiss();
      })
    );
}

之后在不需要加载器的请求里，就可以调用this.request('POST', '/xxx', data, false)来跳过加载器逻辑。

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