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

zhaiduting 的个人博客 / 0 / 2 / 创建于 6年前 / 更新于 4年前

想参照 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发布）

axios es6 promise promise-gif

本作品采用《CC 协议》，转载必须注明作者和本文链接

zhaiduting

课程读者 396 声望

村里的河水原本可以直接饮用的！

0 人点赞

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

讨论数量: 2

zhaiduting

课程读者 396 声望

了解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年前评论

zhaiduting

课程读者 396 声望

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

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

5年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

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

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录