使用场景:

jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了。

示例代码:

        /**
* 封装请求方法
* @param {Object} url 接口请求地址
* @param {Object} data 接口请求参数(无需请求方式参数,则此项可以为空,否则必须传)
* @param {Object} params 请求方式参数(可以为空)
*/
function ajax(url, data, params) {
return new Promise(function(resolve, reject) {
$.ajax({
url: "<{$params['wap_url']}>" + url,
type: params && params.type || 'post',
dataType: params && params.dataType || 'JSON',
data: data,
success: function(res) {
resolve(res)
},
error: function(res) {
alert(res.m)
}
});
}); }
    //引用方法
var params={
goods_id:""
}
this.ajax("package/goodslist",params).then(function(data){
console.log(data)
})

代码解析:

如上,ajax请求的具体请求在封装的方法中进行处理并返回响应数据,调用方法只需要传入接口地址、请求参数就可以了。

如果需要使用其他的请求方式,则通过 params 参数传入预置的 type 和 dataType。

如果需要设置其他的请求参数,则直接对封装方法中扩展就可以了 。

注意事项:

1. 本例只是根据当前需求进行了简单的封装,可以根据自己的需要进行调整。

2. 调用封装好的请求方法必须传入url参数,如果ajax请求的配置参数不需要额外设置的话,则接口请求参数可以不传,如:

this.ajax("package/goodslist").then(function(data){
console.log("ddd,",data)
})

但是,如果ajax请求的配置参数需要配置,则接口参数即使没有,也得传个空值过去,如:

this.ajax("package/goodslist","",{type:"get"}).then(function(data){
console.log("ddd,",data)
})

当然你可以尝试使用es6的解构赋值进行传参。

使用es6的then()方法封装jquery的ajax请求的更多相关文章

  1. Jquery 页面初始化常用的三种方法以及Jquery 发送ajax 请求

    第一种 $(document).ready(function(){ //文档就绪事件 }); 第二种是第一种的简略写法,效果上和第一种是等效的. $(function(){ //文档加载事件,整个文档 ...

  2. Ajax请求(二)--JQuery的Ajax请求方法

    JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...

  3. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  4. 【jquery】ajax 请求成功后新开窗口被拦截解决方法

    问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以 ...

  5. Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)

    1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...

  6. Struts2处理(jQuery)Ajax请求

    1. Ajax     Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...

  7. Servlet处理(jQuery)Ajax请求

    1. jQuery     jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...

  8. 学习AJAX必知必会(4)~JQuery发送Ajax请求

    一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...

  9. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

随机推荐

  1. 学习笔记TF045:人工智能、深度学习、TensorFlow、比赛、公司

    人工智能,用计算机实现人类智能.机器通过大量训练数据训练,程序不断自我学习.修正训练模型.模型本质,一堆参数,描述业务特点.机器学习和深度学习(结合深度神经网络). 传统计算机器下棋,贪婪算法,Alp ...

  2. 第一章 HTML+CSS(上)

    HTML 网页的组成 HTML简介 HTML的语法 HTML的常用标签 HTML中的表格和表单 CSS的简单应用 我们这里使用WebStorm开发工具 配置浏览器 常用插件: CodeGlance 代 ...

  3. TF(2): 核心概念

    TF的核心是围绕Graph展开的,简而言之,就是Tensor沿着Graph传递闭包完成Flow的过程.所以在介绍Graph之前需要讲述一下符号编程.计算流图.梯度计算.控制流的概念. 张量(Tenso ...

  4. c# 动态绘制直线和曲线

    c# 动态绘制直线和曲线   在本案例中利用Graphics对象动态地绘制直线和曲线.程序运行后,选择“直线”单选按钮,然后按下鼠标左键拖动鼠标就可以绘制直线,选择“曲线”单选按钮,然后移动鼠标就可以 ...

  5. maya中的顶点平滑算法(vertex smooth algorithm)

    继上文继续写.有了顶点迭代器之后就可以利用MItMeshVertex类的getConnectedVertices方法来获取相连点并代入平滑算法. 选择什么样的平滑算法呢?本人比较懒,直接打开了计算机图 ...

  6. 接口测试工具SoapUI Pro5.1.2基本使用20150920

    soapui是接口测试工具,最近因为要做接口测试,使用了下,现在和大家分享下: 工具安装很简单,就不说了,直接说使用,先什么都不说,照着操作一遍,我们拿天气预报的webserver来实战: 主要包括: ...

  7. Lock和synchronized的区别和使用

    Java并发编程:Lock 今天看了并发实践这本书的ReentantLock这章,感觉对ReentantLock还是不够熟悉,有许多疑问,所有在网上找了很多文章看了一下,总体说的不够详细,重点和焦点问 ...

  8. 【剑指offer】数组中只出现一次的数字

    题目:一个整型数组里除了两个数字之外,其他的数字都出现了偶数次.请写程序找出这两个只出现一次的数字. 思路1:使用HashMap存上所有的数字,数字作为Key,Value为对应的出现次数.这种做法可以 ...

  9. Solr——配置IK分词器

    首先需要的准备好jdk1.8和tomcat8以及ik分词器(ik分词器是5.x的版本,和solr4.10搭配的版本不一样,虽然是5.x的版本但是也是能使用在solr7.2版本上的) 分享链接https ...

  10. 游戏中转盘概率的算法---python实现

    加入转盘的内容及概率如下 转盘倍数 0.5 0.6 0.7 0.8 1 1.2 1.5 1.8 2 机率 0.2 0.15 0.15 0.2 0.2 0.1 0.1 0.05 0.05 下面来实现转盘 ...