ionic3之发送请求的加载效果-yellowcong

- 日理万妓 2022-05-30 01:50 225阅读 0赞

> 加载组建的使用，会用到`ionic-angular` 的`LoadingController` 组建。在发送请求到远程的服务器的时候，总是需要做一些等待的操作，不然用户的体验会非常的差劲，然而这种基础的东西，inoic早就为我们想到了，可以通过导入LoadingController 组件，在发送请求前显示加载效果，渲染后移除加载效果

## 代码地址 ##

https://gitee.com/yellowcong/ionic/tree/master/ionic3-all

## 实现效果 ##

大家可以看到，我的效果是先弹出一个加载的效果，数据加载出来后，加载的效果消失。  
![这里写图片描述][SouthEast]

## 后台代码（web.ts） ##

后台代码，就是简单的使用了一下`LoadingController` ,其中，我这个代码中，使用的http模块，这个是需要在app.module.ts 中导入的。

//@angular/core是一个npm的模块，定义了angular的核心功能
    import { Component } from '@angular/core';
    
    import { Http, Response } from '@angular/http';
    
    //导入http请求的工具
    
    //NavController就是用来管理和导航页面的一个controlle
    //NavParams 这个是参数
    import { NavController,NavParams } from 'ionic-angular';
    
    //导入等待样式
    import { LoadingController } from 'ionic-angular';
    
    @Component({
        selector: 'page-web',
        templateUrl: 'web.html'
      })
    //export关键词：将类暴露出去，以便其它的文件可以import到它。
    //类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
    export class WebPage {
      // 接收数据用
      listData: Object;
    
      // 依赖注入
      constructor(public navCtrl: NavController, private http: Http,public loadingCtrl: LoadingController) {
    
      }
    
      ionViewDidLoad() {
    
            //加载数据中
            let loading = this.loadingCtrl.create({
                content: '加载数据中...'//数据加载中显示
            });
            //显示等待样式
            loading.present();
    
            // 网络请求
            this.http.request('http://jsonplaceholder.typicode.com/photos')
            .subscribe((res: Response) => {
                //查看返回的数据
                console.log(res);
                this.listData = res.json();
    
                //当数据加载完成后，影藏等待样式
                loading.dismiss();//显示多久消失
            });
        }
    }

## 界面代码（web.html） ##

界面代码，并没有什么，就是一个列表显示，然后就没了。简单的将获取的数据，显示到界面上。

<ion-header> <ion-navbar> <ion-title> Test </ion-title> </ion-navbar> </ion-header> <ion-content> <h1>发送get请求</h1> <ion-list *ngFor="let item of listData"> <ion-item>  <ion-avatar item-left>  <img [src]="item?.url"> </ion-avatar>  { { item?.title}} </ion-item> </ion-list> </ion-content>

## 参考文章 ##

[https://ionicframework.com/docs/api/components/loading/LoadingController/][https_ionicframework.com_docs_api_components_loading_LoadingController]

[SouthEast]: /images/20220530/a42877dbca694e40a197829a613bcf08.png
[https_ionicframework.com_docs_api_components_loading_LoadingController]: https://ionicframework.com/docs/api/components/loading/LoadingController/