封装axios的Loading的提示

    

封装axios的Loading的提示

一、引入插件( vux 和 vant > 也可以只使用 vux ,这里使用两个不同的,是因为我用的是这两个)

// 统一的提示层组件
import { LoadingPlugin } from 'vux';
Vue.use(LoadingPlugin);
import { Notify } from 'vant';
Vue.use(Notify);

二、请求拦截

// http请求拦截器
axios.interceptors.request.use(config => {
    Vue.$vux.loading.show({
        text: '加载中...'
    })
    return config;
}, error => {
    setTimeout(() => {
        Vue.$vux.loading.hide();
        Notify({
            message: '加载超时',
            duration: 1000,
            background: '#1989fa'
        });
    }, 3000);
    return Promise.reject(error);
})
// http响应拦截器
axios.interceptors.response.use(data => { // 响应成功关闭loading
    Vue.$vux.loading.hide();
    return data;
}, error => {
    setTimeout(() => {
        Vue.$vux.loading.hide();
        if(error.response.status == 404) {
            Notify({
                message: '请求接口地址错误',
                duration: 1000,
                background: '#1989fa'
            });
        }else if(error.response.status == 504) {
            Notify({
                message: '网关错误',
                duration: 1000,
                background: 'rgb(255, 68, 68)'
            });
        }else if(error.response.status == 405) {
            Notify({
                message: '请求类型错误',
                duration: 1000,
                background: '#1989fa'
            });
        }else{
            Notify({
                message: '加载失败',
                duration: 1000,
                background: 'rgb(255, 68, 68)'
            });
        }
    }, 1000);
    return Promise.reject(error);
})

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://tencent.信息

  近期评论

  •  osc_omoo: 前端加密后端解密吧?你不会用的是nodejs吧?改成java的后端解密麻烦吗?
  •  环洋诚信SSL证书客服: 按照博主的思路和代码,我已经搭建成功了。但是有一个小小的问题想请教下,重新执行安装代码后,之前...
  •  澄弘: 已经添加了你的博客

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论你选择做什么,追求完美的程度决定你成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

现在站在什么地方不重要,重要的是你往什么方向移动。