微信小程序全局加载中图标效果
需求效果: 请求未完成时显示加载中效果
步骤与思想:
1.因为封装好的异步请求方法是全局的,有些页面可能同时发送多个异步请求,但返回数据的时间可能不一样,如果我们单单是一返回结果就结束loading动画,可能会产生有的异步请求还未完成就结束这个效果,所以我们必须保证所有的异步请求完成时才结束loading效果。所以我们定义ajaxTime变量一开始为0,发送一个异步请求就加一,返回结果就减一,直到最后所有的请求都发送完毕,此时我们就可以结束loading效果,代码如下
let ajaxTime=0;//定义计数遍历ajaxTime=0
export const request=(params)=>{
ajaxTime++;//调用异步请求方法就加一
wx.showLoading({//显示loading效果
title: '加载中',
mask:true
})
const baseUrl="https://api-hmugo-web.itheima.net/api/public/v1"
return new Promise((resolve,reject)=>{
var reqTask = wx.request({
...params,
url:baseUrl+params.url,
success:(result)=>{//返回数据成功时
resolve(result.data.message);
},
fail:(err)=>{//返回数据失败时
reject(err);
},
complete:()=>{//无论成功或者失败
ajaxTime--;
if(ajaxTime==0){
wx.hideLoading()//关闭loading效果
}
}
});
})
}