axios.get (url).wait (loadingGif, functionOk, functionErr)

想参照 axios.get(url).then(functionOk, functionErr)
弄一个 axios.get(url).wait(loadingGif, functionOk, functionErr)
要求:
1、执行 wait() 函数后能在屏幕正中央显示一个无限旋转的gif动画;
2、回调 functionOk() 或者 functionErr() 后 0.1 秒自动关闭gif动画。

尽量不要修改axios源码,不然每次升级都得重新修改,挺麻烦。最好能单独写个钩子函数挂到axios上。


以上2018年12月22号的帖子,问题早已解决博客:一个函数搞定等待提示(promise-gif v3发布)

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 2

了解Promise之后这才找到了一个比较笨拙的解决方法,代码如下

let p=Promise.resolve('此处模拟 axios.get 请求成功的情况')

Promise.prototype.wait=function(){
    console.log('此时显示无限旋转的gif动画') ;
    return this;
}

p.wait().then(msg=>
    {
        console.log('服务器响应成功,此时干点正经事')
        console.log('获取axios返回的消息:'+msg)
    }
).catch(()=>
    console.log('服务器报错,干点不想干的吧')
).finally(()=>
    setTimeout(()=>
        console.log('服务器响应已收到,可以隐藏gif动画了'), 200
    )
)

上面这段代码的执行结果如下(某些浏览器不支持 finally(f),可改用 then(f, f) 兼容)

> "此时显示无限旋转的gif动画"
> "服务器响应成功,此时干点正经事"
> "获取axios返回的消息:此处模拟一个 axios.get 请求"
> "服务器响应已收到,可以隐藏gif动画了"

以上代码给then()传递一个成功状态的回调函数,用来处理正式的业务逻辑。
后跟catch()专门处理失败的回调。
无论响应成功与否,都应在响应收到后及时关闭gif动画。这正是finally()所做的事。

把第一行代码改成如下形式
let p=Promise.reject('此处模拟 axios.get 请求失败的情况')
其他代码不变,运行结果如下

> "此时显示无限旋转的gif动画"
> "服务器报错,干点不想干的吧"
> "服务器响应已收到,可以隐藏gif动画了"

以上采用 Promise.resolve 模拟 axios 请求的,推测实际应用中也应该行得通。

5年前 评论

仔细一想,忽然又觉得此法不算笨,其中 wait() 函数写得比较到位。尤其最后的 return this 返回的比较巧妙,有了这个 this 才能保证后续的链式调用得以继续下去。

Promise.prototype.wait=function(){
    // 这里处理gif动画的展示效果
    return this;
}
5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
63
粉丝
17
喜欢
140
收藏
118
排名:132
访问:7.4 万
私信
所有博文
社区赞助商