Vux+Axios拦截器增加loading的问题及实现方法


Posted in Javascript onNovember 08, 2018

很多时候,我们在页面使用Ajax刷新时候,会希望它出现loading的图标,让用户体验更好一些。那么如果我们每次在Axios里面进行请求,都要显示loading图标的话,那么没有一个全局的方法的话,势必会造成代码冗余的问题。有什么方法可以实现这个方法呢?

这里,我们就要用到Axios的请求拦截器与相应拦截器了

首先,我们在请求拦截器里面增加一个VUX的loading组件

axios.interceptors.request.use(
config => {
//请求拦截器,调用loading插件
// 显示loading
// 判断是否重复提交请求,也就是loading是否还存在,如果存在则不显示新的loading
let isShow = window.app.$vux.loading.isVisible()
if(!isShow&&config.showLoading){
  window.app.$vux.loading.show({
  text: 'Loading'
  })
}
config.data = JSON.stringify(config.data);
config.headers = {
  'Content-Type': 'application/json',
}
return config;
},
error => {
return Promise.reject(err);
}
);

整个数据里面,我们看到了里面有一个参数是$vux.loading.isVisible()这个。这个是vux自带的一个loading状态显示的参数。如果loading正在显示的话,它会是true,否则的话就显示false

因为我们不希望同时有多个请求的时候,出现多个loading状态,这样的话用户看起来会很迷茫,所以我们在调用的时候,先判断一下这个状态。

然后在响应拦截器里面关掉它就好了

Vux+Axios拦截器增加loading的问题及实现方法

下面通过实例代码介绍下vue中使用axios

1.安装axios

npm:

$ npm install axios -S

cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.配置axios

在项目中新建api/index.js文件,用以配置axios

api/index.js

import axios from 'axios';
let http = axios.create({
 baseURL: 'http://localhost:8080/',
 withCredentials: true,
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
 },
 transformRequest: [function (data) {
  let newData = '';
  for (let k in data) {
   if (data.hasOwnProperty(k) === true) {
    newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
   }
  }
  return newData;
 }]
});
function apiAxios(method, url, params, response) {
 http({
  method: method,
  url: url,
  data: method === 'POST' || method === 'PUT' ? params : null,
  params: method === 'GET' || method === 'DELETE' ? params : null,
 }).then(function (res) {
  response(res);
 }).catch(function (err) {
  response(err);
 })
}
export default {
 get: function (url, params, response) {
  return apiAxios('GET', url, params, response)
 },
 post: function (url, params, response) {
  return apiAxios('POST', url, params, response)
 },
 put: function (url, params, response) {
  return apiAxios('PUT', url, params, response)
 },
 delete: function (url, params, response) {
  return apiAxios('DELETE', url, params, response)
 }
}

这里的配置了POST、GET、PUT、DELETE方法。并且自动将JSON格式数据转为URL拼接的方式

同时配置了跨域,不需要的话将withCredentials设置为false即可

并且设置了默认头部地址为:http://localhost:8080/,这样调用的时候只需写访问方法即可

3.使用axios

注:PUT请求默认会发送两次请求,第一次预检请求不含参数,所以后端不能对PUT请求地址做参数限制

首先在main.js中引入方法

import Api from './api/index.js';
Vue.prototype.$api = Api;

然后在需要的地方调用即可

this.$api.post('user/login.do(地址)', {
  "参数名": "参数值"
}, response => {
   if (response.status >= 200 && response.status < 300) {
    console.log(response.data);\\请求成功,response为成功信息参数
   } else {
    console.log(response.message);\\请求失败,response为失败信息
   }
});

总结

以上所述是小编给大家介绍的Vux+Axios拦截器增加loading的问题及实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
JavaScript Promise启示录
Aug 12 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
Angular设置别名alias的方法
Nov 08 #Javascript
vue-cli安装使用流程步骤详解
Nov 08 #Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 #Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 #Javascript
Vue实现简易翻页效果源码分享
Nov 08 #Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 #Javascript
详解如何创建并发布一个 vue 组件
Nov 08 #Javascript
You might like
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python打包多类型文件的操作方法
2020/09/21 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
高中生自我评语大全
2014/01/19 职场文书
运动会通讯稿100字
2014/01/31 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
文化宣传方案
2014/03/13 职场文书
应届生求职信范文
2014/05/26 职场文书
地理科学专业自荐信
2014/09/01 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
python读取mnist数据集方法案例详解
2021/09/04 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫