小程序-网络同时多次请求加载中效果优化

最新推荐文章于 2023-11-26 02:15:17 发布

Zan^Z

最新推荐文章于 2023-11-26 02:15:17 发布

阅读量805

点赞数

分类专栏：小程序前端

本文链接：https://blog.csdn.net/Zan_Z/article/details/112704715

版权

微信小程序接口请求加载动画请求管理用户体验

关键词由CSDN通过智能技术生成

小程序同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

前端

26 篇文章 0 订阅

订阅专栏

针对小程序中页面同时发起多个接口请求，导致‘努力加载中’效果过早消失的问题，提出解决方案。通过设置ajaxTimes变量记录请求次数，每次请求增加计数，请求完成减少计数，当计数回到初始值0时才隐藏加载提示，确保所有数据加载完毕后再隐藏，优化用户体验。

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

问题：小程序封装request请求时，页面同时请求多个接口，但是努力加载中只显示一次，就隐藏掉了导致其他接口数据还没显示完全时，努力加载中就没了，看着页面不和谐

解决办法：定义ajaxTimes作为请求次数标记，每进入到request中次数加1，请求结束次数减1，当ajaxTimes的次数等于初始值0时，将wx.showLoading隐藏

function request(url, data, fnsuccess, fnfail) {
  ajaxTimes++;
  wx.showLoading({
    mask: true,
    title: '努力加载中'
  })
  wx.request({
    url: root_url + url,
    data: data,
    header: {
      'content-type': 'application/json'
    },
    method: 'GET',
    dataType: 'json',
    responseType: 'text',
    success: function (res) {
      fnsuccess(res);      
    },
    fail: function (res) {
      if (fnfail) fnfail(res);
      console.log(res);
      setTimeout(() => {
        wx.showToast({
          title: "显示内容",
          icon: 'none',
          duration: 2000
        })
        setTimeout(() => {
          wx.hideToast();
        }, 2000)
      }, 0);     
    },
    complete: function (res) {
      //console.log(res);
      ajaxTimes--;
      if (ajaxTimes == 0) wx.hideLoading();
    },
  })
}