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

c++开发工程师2024-02-04 9:43

c 复制代码

//定义请求根路径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效果