模拟网络延迟加载,添加正在加载中图标显示

//定义请求根路径baseUrl
const baseUrl="http://localhost:8080";

//同时发送异步代码的次数
let ajaxTimes=0;

/**
 * 返回请求根路径baseUrl
 */
export const getBaseUrl=()=>{
    return baseUrl;
}


/**
 * 后端请求工具类
 * @param {*} params 
 */
export const requestUtil=(params)=>{

    var start=new Date().getTime();
    console.log("ajaxTimes="+ajaxTimes)
    
    ajaxTimes++;

    //显示加载效果
    wx.showLoading({
      title: '加载中',
    })
    //模拟网络延迟加载
    while(true) if(new Date().getTime()-start > 1 * 1000)break;

    return new Promise((resolve,reject)=>{
        wx.request({
          ...params,
          url:baseUrl+params.url,
          success:(result)=>{
              resolve(result.data)
          },
          fail:(err)=>{
              reject(err)
          },
          complete:()=>{
              ajaxTimes--;
              if(ajaxTimes==0){
                  //关闭正在等待的图标
                  wx.hideLoading();
              }
          }
        })
    });
}

因为封装好的异步请求方法是全局的,有些页面可能同时发送多个异步请求,但返回数据的时间可能不一样,如果我们单单是一返回结果就结束loading动画,可能会产生有的异步请求还未完成就结束这个效果,所以我们必须保证所有的异步请求完成时才结束loading效果。所以我们定义ajaxTime变量一开始为0,发送一个异步请求就加一,返回结果就减一,直到最后所有的请求都发送完毕,此时我们就可以结束loading效果

你可能感兴趣的:(分布式小程序电商2,javascript,开发语言,ecmascript)