angular - 如何在 Angular/ ionic 的每个服务调用中显示/隐藏加载程序？

Question

我有一个提供程序，其中有很多函数，有没有办法在 ionic 中执行任何函数调用之前执行函数。 这是我的代码，我想在每次 HTTP 调用之前执行加载器函数 以简单的方式无需多次调用函数

 @Injectable()
  export class HttpProvider {
    BASEURL: string = 'https://www.ngrok.io';
    constructor(public http: HttpClient) {
      console.log('Hello HttpProvider Provider');
    }

    getCustomerInfo(customer_mobile) {
      return this.http.post(this.BASEURL + '/customer/get', {
        customer_mobile,
      });
    }

    addNewCustomer(customerInfo) {
      return this.http.post(this.BASEURL + '/customer/save', customerInfo);
    }
    updateCustomer(customerInfo) {
      return this.http.post(this.BASEURL + '/customer/update', customerInfo);
    }

    getVendorList(filterObject) {
      return this.http.post(this.BASEURL + '/getvendorlist', filterObject);
    }

    getVendorInfo(vendor_id) {
      return this.http.post(this.BASEURL + '/getvendorinfo', {
        vendor_id,
      });
    }

    updateAddress(updatedAddress) {
      return this.http.post(
        this.BASEURL + '/customeraddress/update',
        updatedAddress
      );
    }
    addAddress(newAddress) {
      return this.http.post(this.BASEURL + '/customeraddress/save', newAddress);
    }

    addOrder(orderDetails) {
      return this.http.post(this.BASEURL + '/order/save', orderDetails);
    }

    deleteAddress(address_id) {
      return this.http.post(this.BASEURL + '/customeraddress/delete', {
        address_id,
      });
    }
    getOrderList(customer_id, date?) {
      return this.http.post(
        this.BASEURL + '/fetchallcustomerorders',
        requestBody
      );
    }
    addReview(review: { feedback: string; rating: string; order_id: string }) {
      return this.http.post(this.BASEURL + '/orderreview', review);
    }


  }

Answer 1

您可以使用HTTPInterceptors在每次服务调用时显示/隐藏加载程序。

本教程将帮助您实现这一目标:Show Loader on every service call in angular

您可以在 intercept 方法中显示加载程序，一旦响应到来，您就可以隐藏它。

@Injectable()
export class MyInterceptor implements HttpInterceptor {
constructor(private loaderService: LoaderService) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    this.loaderService.show();

    return next
        .handle(req)
        .do(event => {
            if (event instanceof HttpResponse) {

                this.loaderService.hide();
            }
        });
  }