`
AILIKES
  • 浏览: 186264 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

VUE axios 加载中提示封装

阅读更多
import axios from 'axios'
// 引入axios以及element ui中的loading和message组件
import { MessageBox,Indicator } from 'mint-ui';
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
    if(config.url.indexOf("?")!=-1){
      config.url = config.url + "&_v=" + genVersion();
    }else{
      config.url = config.url + "?_v=" + genVersion();
    }
  console.log(config.url);
  Indicator.open({
    //text: '加载中,请稍后...',
spinnerType: 'fading-circle'
});
  return config
}, error => {
  MessageBox.alert('数据加载超时,请检查您的网络或稍后重试!').then(action => {
    Indicator.close();
  });
  return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
Indicator.close();
  return data
}, error => {
  MessageBox.alert('数据加载失败!').then(action => {
    Indicator.close();
  });
  return Promise.reject(error)
})

export default axios;
分享到:
评论

相关推荐

    vue-axios.zip

    // 添加请求头、加载提示等 return config }, error => { // 处理错误 Promise.reject(error) } ) ``` 5. **响应拦截器** 同样,我们也可以设置响应拦截器来处理所有请求的返回结果,例如统一处理错误...

    vuexaxios封装vuex与axios任何vue项目可以直接复用

    总的来说,"vue-x-axios" 是 Vue.js 开发中的一个实用工具,它将 Vuex 和 Axios 的优势相结合,为开发者提供了一种高效且易于维护的状态管理和网络请求解决方案。通过学习和掌握这种封装方式,可以提升项目的开发...

    详解vue axios二次封装

    Vue Axios 二次封装是将官方提供的 Axios 库根据项目的实际需求进行定制化处理,以提高开发效率和代码的可维护性。在这个过程中,通常会包括设置公共参数、拦截器、错误处理等方面的工作。 首先,引入 Axios 和 QS ...

    解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

    本文将详细解析此问题的产生原因以及解决方法,并探讨在不同文件中封装Axios及挂载Vue实例对拦截器执行的影响。 ### Vue在封装Axios后的手动刷新问题 在项目开发过程中,开发者可能会将Axios的实例化和拦截器的...

    vue项目中axios请求网络接口封装的示例代码

    在Vue项目中,使用axios进行网络接口的封装是提高代码复用性和可维护性的重要步骤。下面我们将详细探讨如何在Vue项目中实现axios的封装,以及封装get和post方法的具体步骤。 首先,我们需要创建一个新的JavaScript...

    使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + exp.zip

    在Vue项目中,Axios常用于发送HTTP请求,获取或提交数据到服务器。它的易用性和灵活性使得它成为Vue生态中的首选HTTP库。 5. **MySQL**:MySQL是一个关系型数据库管理系统,用于存储和管理应用程序的数据。在这个...

    【JavaScript源代码】Vue3中使用typescript封装axios的实例详解.docx

    在Vue3中,使用TypeScript封装axios是一种常见的最佳实践,以提高代码的可维护性和类型安全性。以下是对这个实例的详细解析: 首先,我们导入必要的库。`axios`是常用的HTTP客户端,`IResponseData`是从自定义的...

    vue axios封装及API统一管理的方法

    本文详细介绍了在Vue项目中如何封装axios以及如何进行API接口的统一管理,这对于开发大型项目和多人合作的项目尤为重要。在Web开发中,axios是一个广泛使用的基于Promise的HTTP客户端,它适用于浏览器端和Node.js...

    vue axios重复点击取消上一次请求封装的方法

    封装代码 来自于互联网 let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pending...

    使用VUE自定义组件封装数据字典实战

    在Vue开发中,数据字典的管理是必不可少的,它涉及到对系统中各种常量值的维护,如性别、证件类型、审批状态等。为了提高代码的可复用性和维护性,我们可以对这些常见的功能进行封装,特别是对于前端展现常用的下拉...

    解决vue axios的封装 请求状态的错误提示问题

    总结起来,解决Vue axios封装中的错误提示问题关键在于正确使用axios的拦截器,通过拦截器对请求和响应进行预处理和异常处理。这不仅提高了代码的可读性和复用性,还使我们能更优雅地处理可能出现的错误状态,提供更...

    vue axios基于常见业务场景的二次封装的实现

    Vue Axios的二次封装是开发中常见的一种实践,旨在根据项目的具体需求优化网络请求流程,提高代码的可维护性和复用性。以下是对标题和描述中所述知识点的详细说明: 1. **Axios库的介绍**: Axios是一个流行的...

    vue 对axios get pust put delete封装的实例代码

    在这篇文章中,我们将详细探讨如何在Vue项目中封装axios库来执行GET、POST、PUT和DELETE请求。文章中提供了具体的实例代码和解释,以帮助Vue开发者更好地理解和应用这些HTTP请求。首先,需要说明的是axios是一个基于...

    vue3+vite+pinia+axios+mock+ElementPlus:登录,动态路由,存储,网络 js非ts纯前端

    动态路由(Dynamic Routing)是前端路由管理的重要特性,Vue Router允许根据不同的URL匹配不同的组件,实现页面的动态加载。在Vue3中,可以通过`router.addRoute`或`router.deleteRoute`等方法动态添加或删除路由,...

    vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作

    我就废话不多说了,大家还是直接看代码吧~ Axios.all([request1, request2, request3]) .then( Axios.spread((area, acct,...补充知识:vue,axios处理同一个接口多次访问的执行顺序问题 碰到个问题记录一下,就是ax

    基于vue配置axios的方法步骤

    为了解决这些问题,我们可以对axios进行封装,定义一些参数进行申明,例如加载最小时间、超时时间、环境value、请求接口host等。然后,我们可以对axios进行统一的配置,例如设置Content-Type、baseURL等。 在实际...

    vue单页应用包含loading封装prompt封装转场动画

    在"vue单页应用包含loading封装prompt封装转场动画"这个项目中,我们将会深入探讨如何在Vue.js环境中实现这三个关键功能:加载(loading)状态的封装、提示框(prompt)的封装以及转场动画。 1. **Loading 封装**:...

    基于vant的移动端vue项目,包含自适应布局,axios封装,过滤器,跨域代理,vuex,基础校验,路由拦截,头部bar配置显示等模块内容,也支持vant D

    在移动端 Vue 项目中,通常会对其进行封装,以简化网络请求的调用,统一错误处理,以及添加全局配置,如设置请求头、超时等。封装 axios 可以提高代码复用性和可维护性,使得在整个项目中进行网络请求更加方便和一致...

Global site tag (gtag.js) - Google Analytics