微信小程序-uniApp 接口调用前后loading状态

相关SDK在文章末尾

设计的思想是由于考虑到每个页面都要在接口调用完成后才显示页面，于是干脆封装成全局方法，页面一次调用即可。

实现要点：

• 页面中的status.showPages 用于控制内容区（页面）的显示与隐藏
• 页面中的status.loading用于控制自定义loading组件的显示与隐藏
• 定义async函数方法调用接口，成功返回true，否则返回false，再将其作为函数参数传入全局方法即可

一、引入

// main.js
import { showPages } from './util/network.js'
Vue.prototype.$showPages = showPages

二、使用

<template>
  <view>
    <!-- 自定义loading组件 -->
    <load_model
      mask
      mask_opacity="0"
      :show_model="status.loading"
      :title="loading_title"
    ></load_model>
   	 <!-- 内容区 -->
     <view class="container" :hidden="status.showPages"></view>
  </view>
</template>
<script>
import load_model from "../../../components/load-model/load-model.vue";
export default {
	components: { load_model },
    data() {
    	return {
      	//状态属性
      	status: {
        	showPages: true, //控制页面的显示
        	loading: false, //控制loading组件的显示
      	},
      	list: [], // 列表数据
      	loading_title: "加载中", //loading模块标题
    },
     onLoad() {
    	this.$showPages(this.getList()); //调用全局方法，完成接口请求后显示页面
 	 },
 	  methods: {
    /*****************************************
     * 获取列表数据
     *****************************************/
    async getList() {
      const res = await this.$request({
        url: "/api/exam/getListType",
      });
      console.log("/api/exam/getListType", res);
      if (res.data.code == 0) {
        this.list = res.data.data;
        return true;
      } else {
        return false;
      }
    },
  },
}
</script>

三、SDK

// 控制页面的显示与隐藏 
// 页面需要引入load_model组件
export function showPages(showPages) {
    this.status.loading = true; // 开启遮罩,需要在页面中定义属性
    let num = 0;
    let timer = setInterval(() => {
        // 设置几秒后遮罩文案变化
        if (num >= 3) {
            // 遮罩文案,需要在页面中定义属性
            this.loading_title = "加载时间较长,\n请耐心等待";
        }
        num++;
    }, 1000);
    showPages.then((res) => {
        this.status.loading = false; // 关闭遮罩
        clearInterval(timer); // 关闭定时器
        if (num >= 8 || !res) {  // 超过8秒反馈加载失败
            uni.hideLoading();
            uni.showToast({
                title: "加载失败",
                icon: "none",
                mask: true,
            });
            setTimeout(() => {
                uni.navigateBack({
                    delta: 1,
                });
            }, 500);
        } else {
            this.status.showPages = false; // 显示页面,需要在页面中定义属性
            uni.hideLoading();
        }
        num = 0;
    }).catch(err => {
        console.log(err);
        if (err) {
            clearInterval(timer);
            this.status.loading = false;
            uni.hideLoading();
            uni.showToast({
                title: "加载失败",
                icon: "none",
                mask: true,
            });
            setTimeout(() => {
                uni.navigateBack({
                    delta: 1,
                });
            }, 500);
            return;
        }
    });
}

如果有不足，欢迎大家批评指正，如果大家有更好的实现方式，希望能够一起探讨~