总结：
当小程序中ajax请求同时出现hideLoading和showToast时候，两者在真机上会起冲突，导致showToast迅速消失或者直接不可见。
现象：toast弹框迅速消失不见
来源：新疆一码游核销小程序
文件：request.js
原代码：
request = (method, url, data) => {
wx.showLoading({
title: '加载中',
})
return new Promise((resolve, reject) => {
wx.request({
url: this.baseURL + url,
data,
method,
header: {
'content-type': 'application/json', // 默认值
weChatToken: this.getToken()
},
success: res => {
wx.hideLoading() //hideLoading在showToast之后调用会导致真机中toast立即消失
res = res.data
if (res.errorCode === '00000') {
resolve(res)
} else {
if (['00002', '00003'].includes(res.errorCode)) {
logout(res.message)
} else {
wx.showToast({
title: res.message,
icon: 'none',
duration: 3000
})
}
reject(res)
}
},
fail: e => {
reject({
message: '出错啦，请重试',
url: this.baseURL + url,
})
wx.hideLoading()
}
})
})
}
修改后：
request = (method, url, data) => {
wx.showLoading({
title: '加载中',
})
return new Promise((resolve, reject) => {
wx.request({
url: this.baseURL + url,
data,
method,
header: {
'content-type': 'application/json', // 默认值
weChatToken: this.getToken()
},
success: res => {
res = res.data
if (res.errorCode === '00000') {
resolve(res)
} else {
if (['00002', '00003'].includes(res.errorCode)) {
logout(res.message)
} else {
wx.showToast({
title: res.message,
icon: 'none',
duration: 2000
})
}
reject(res)
}
},
fail: e => {
reject({
message: '出错啦，请重试',
url: this.baseURL + url,
})
},
complete : res=>{
setTimeout(() => {
wx.hideLoading()
}, 2000);
}
})
})
}
修改前后比较:
现象：toast弹框无法弹出
来源：新疆一码游小程序
文件：http.interceptor.js、xinjiang-miniApp/src/pages/myPKG/angelCode/main.vue
出现时机：
当接口
"/freeTicketActivity/queryAngelCode"
返回值为
{"errorCode":"01141","message":"活动不存在","data":null}
时， 公共文件http.interceptor.js中执行showtoast，main.vue中goPageByCode函数的ajax执行到finally中的hideLoading，导致在真机上冲突，从而引发此现象。
http.interceptor.js中定义了请求失败时toast的逻辑：
main.vue中原代码：
// 根据是否拥有天使码code进入不同页面
goPageByCode(){
uni.showLoading({
title: '加载中...'
})
this.$http
.post('/freeTicketActivity/queryAngelCode',{
activityId : this.activityId,
phone : uni.getStorageSync('userInfo').phone
})
.then(res => {
if(res.data){
uni.redirectTo({
url : `/pages/myPKG/angelCode/qrcode?id=${this.activityId}&code=${res.data}`
})
}else{
this.visible = true
this.getDetail()
}
}).finally(()=>{
uni.hideLoading()
}).catch(()=>{
setTimeout(() => {
uni.navigateBack()
}, 1500);
})
},
main.vue中修改后代码：
// 根据是否拥有天使码code进入不同页面
goPageByCode(){
uni.showLoading({
title: '加载中...'
})
this.$http
.post('/freeTicketActivity/queryAngelCode',{
activityId : this.activityId,
phone : uni.getStorageSync('userInfo').phone
})
.then(res => {
if(res.data){
uni.redirectTo({
url : `/pages/myPKG/angelCode/qrcode?id=${this.activityId}&code=${res.data}`
})
}else{
this.visible = true
this.getDetail()
}
uni.hideLoading()
}).catch(()=>{
setTimeout(() => {
uni.navigateBack()
}, 1500);
})
}
修改前后比较:
