使用es6的then()方法封装jquery的ajax请求
使用场景:
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请求的更多相关文章
- Jquery 页面初始化常用的三种方法以及Jquery 发送ajax 请求
第一种 $(document).ready(function(){ //文档就绪事件 }); 第二种是第一种的简略写法,效果上和第一种是等效的. $(function(){ //文档加载事件,整个文档 ...
- Ajax请求(二)--JQuery的Ajax请求方法
JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- 【jquery】ajax 请求成功后新开窗口被拦截解决方法
问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以 ...
- Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- Struts2处理(jQuery)Ajax请求
1. Ajax Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...
- Servlet处理(jQuery)Ajax请求
1. jQuery jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...
- 学习AJAX必知必会(4)~JQuery发送Ajax请求
一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...
- JQuery发送ajax请求不能用数组作为参数
JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){ var select ...
随机推荐
- msm8909平台JEITA配置和bat-V therm表合入
8909平台的冷热充电温度点是硬件控制的,不能软件控制,目前硬件设置的是0~55度的充电区间. 软件上应该设置的是BTM comparator threshold, 70%(cold)~35%(hot ...
- 学习笔记TF021:预测编码、字符级语言建模、ArXiv摘要
序列标注(sequence labelling),输入序列每一帧预测一个类别.OCR(Optical Character Recognition 光学字符识别). MIT口语系统研究组Rob Kass ...
- PythonStudy——函数的导入 Import of functions
# 函数:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表函数# 难点:如何定义个函数 # 现实中很多问题要通过一些工具进行处理 => 可以将工具提前生产出来并命名# = ...
- python base64.b64decode 等号可以随便加
由于 = 用在URL,cookie里会造成歧义,所以base64编码的时候,会把 = 自动去掉. 解码的时候,如果传入的二进制编码长度小于4的倍数,那么需要在后面补=,知道满足长度等于4的倍数,然后 ...
- python中的copy.copy和copy.deepcopy
一个例子就搞清楚 import copy a = [1, 2, 3, 4, ['a', 'b']] #原始对象 b = a #赋值,传对象的引用 c = copy.copy(a) #对象拷贝,浅拷贝 ...
- oracle命令2
使用DDL创建和管理表 DBA角色:拥有全部特权,是系统最高权限,只有DBA才可以创建数据库结构,并且系统权限也需要DBA授出,且DBA用户可以操作全体用户的任意基表,包括删除 grant dba t ...
- Tomcat虚拟根目录与虚拟目录
tomcat版本:apache-tomcat-7.0.42 参考:http://blog.csdn.net/pangdingshan/article/details/7214786 一.虚拟根目录 1 ...
- Spring boot 配置 mybatis xml和动态SQL 分页配置
更新时间 2018年4月30日23:27:07 1.pom.xml <?xml version="1.0" encoding="UTF-8"?> & ...
- jstack命令定位java程序CPU利用率高的代码位置
高手是怎么使用jstack精确找到异常代码的(java程序CPU利用率高的情况) 请jstack神器来帮忙 本文介绍Linux环境下使用jstack定位问题的秘笈1.[top命令]找到CPU利用率持续 ...
- MySQL 5.7临时表空间
MySQL 5.7起,开始采用独立的临时表空间(和独立的undo表空间不是一回事哟),命名ibtmp1文件,初始化12M,且默认无上限. 选项 innodb_temp_data_file_path 可 ...