ionic加载loading和封装http请求

最新推荐文章于 2022-09-20 17:01:29 发布

南风过境~

最新推荐文章于 2022-09-20 17:01:29 发布

阅读量608

点赞数

分类专栏： augular的学习

本文链接：https://blog.csdn.net/qq_43688916/article/details/102955179

版权

本文介绍了如何在Ionic应用中创建一个loading服务，用于显示加载指示器，并封装HTTP请求，提高代码复用性和用户体验。通过创建loading.service.ts和util.service.ts文件，实现了加载逻辑和服务调用，方便在页面中便捷使用。

摘要由CSDN通过智能技术生成

创建一个service文件夹
文件夹下面是loading和util文件

loading.service.spec.ts

import { TestBed } from '@angular/core/testing';

import { LoadingService } from './loading.service';

describe('LoadingService', () => {
  beforeEach(() => TestBed.configureTestingModule({}));

  it('should be created', () => {
    const service: LoadingService = TestBed.get(LoadingService);
    expect(service).toBeTruthy();
  });
});

loading.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  isLoading = false;

  constructor(public loadingController: LoadingController) { }

  async present() {
    console.log("启动loading")
    if(this.isLoading){
      console.log("已有loading,驳回")
        return;
    }
    this.isLoading = true;
    return await this.loadingController.create({
      // duration: 5000,
    }).then(a => {
      a.present().then(() => {
        console.log('presented');
        if (!this.isLoading) {
          a.dismiss().then(() => console.log('abort presenting'));
        }
      });
    });
  }

  async dismiss() {
    console.log("关闭loading")
    if(!this.isLoading){
      console.log("已关闭loading,驳回")
        return;
    }
    this.isLoading = false;
    return await this.loadingController.dismiss().then(() => console.log('dismissed'));
  }
}

util.service.spec.ts

import { TestBed } from '@angular/core/testing';

import { UtilService } from './util.service';

describe('UtilService', () => {
  beforeEach(() => TestBed.configureTestingModule({}));

  it(