分析
微信小程序目前没有提供刷新API,所以要自己去记录当前操作,点击刷新重新执行一遍
效果
点击‘重新加载’重新加载页面
实现
由于做项目时,页面渲染离不开接口请求,所以我封装了一下wx.request来判断是否断网,及断网后记录本次请求
/**
* obj request请求参数
* cb requrst请求成功回掉
* page 当前page实例
**/
function wxRequest (obj, cb, page, type) {
var isOne = true
var cachFn = function () {
wx.request({
url: obj.url,
data: obj.data || {},
method: obj.method || 'GET',
success: function (res) {
cb.call(page, res)
if (!page.data.isNet) {
page.setData({
isNet: true
})
}
},
// fail执行时当断网处理
fail: function () {
// 防止fail 有时会执行两次,影响渲染
if (!isOne) {
return
}
page.setData({
isNet: false,
isRequested: false
})
// 记录本次请求,加载时,执行page实例的reloadFn即可
page.reloadFn = wxRequest(obj, cb, page, 1)
isOne = false
}
})
}
if (type) {
page.isRequested = true
}
return type ? cachFn : cachFn()
}
应用
let data = {
url: '',
data: {},
method: ''
}
wxTools.wxRequest(data, (res) => {
// 数据渲染
this.setData({})
}, this)
断网时,执行this.reloadFn就回重新上一次请求,isNet及判断是否断网