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上。
本人技术不够,搞不定,特此求助。

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 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 请求的,推测实际应用中也应该行得通。

1周前

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

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

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!