基于Vue的ajax公共方法(详解)


Posted in Javascript onJanuary 20, 2018

为了减少代码的冗余,决定抽离出请求ajax的公共方法,供同事们使用。

我使用了ES6语法,编写了这个方法。

/**
  * @param type 请求类型,分为POST/GET
  * @param url 请求url
  * @param contentType
  * @param headers
  * @param data
  * @returns {Promise<any>}
  */
 ajaxData: function (type, url, contentType, headers, data) {
  return new Promise(function(resolve) {
   $.ajax({
    type: type,
    url: url,
    data: data,
    timeout: 30000, //超时时间:10秒
    headers: headers,
    success: function(data) {
     resolve(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
     resolve(XMLHttpRequest);
    }
   });
  });
 }

通过回调函数的方式返回请求结果。

测试代码如下:

getAjaxDataMethod: function () {
    const url = "";
    const type = "POST";
    const contentType = "application/json";
    const headers = {};
    const data = {};
    Api.ajaxData(type, url, contentType, headers, data).then(function (res) {
     console.log(res);
    }).catch(function (err) {
     console.log(err);
    })
   }

测试通过!

以上这篇基于Vue的ajax公共方法(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
详解vue.js数据传递以及数据分发slot
Jan 20 #Javascript
Angular2整合其他插件的方法
Jan 20 #Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 #Javascript
javascript数组拍平方法总结
Jan 20 #Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 #Javascript
详解Node.js模板引擎Jade入门
Jan 19 #Javascript
JS实现碰撞检测的方法分析
Jan 19 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
jquery中获取元素的几种方式小结
2011/07/05 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
jquery等待效果示例
2014/05/01 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python asyncio 协程库的使用
2021/01/21 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
安全生产一岗双责责任书
2014/07/28 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技