ajax.then()用法,使用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: "" + 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的解构赋值进行传参。

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 ...

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

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

Angular和jQuery的ajax请求的差别

近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...

随机推荐

matlab 求解线性方程组之范数

1.赋范线性空间和内积空间 在线性代数的初级教材里,一般是在向量空间中定义内积,然后再由内积来导出范数,比如在n维实向量空间中: |x||=√ 在线性代数的高级教材中,一般是将内 ...

MongoDB 初见指南

技术若只如初见,那么还会踩坑么? 在系统引入 MongoDB 也有几年了,一开始是因为 MySQL 中有单表记录增长太快(每天几千万条吧)容易拖慢 MySQL 的主从复制.而这类数据增长迅速的流水表, ...

Python入门4

函数 函数其实在日常的编码过程中,你都在使用,比如print().input().len()等函数,只不过这些都是python给你写好的内置函数,供你是用,内置的函数数量有限,想让python为我们做 ...

Linux中的文件特殊权限

linux中除了常见的读(r).写(w).执行(x)权限以外,还有3个特殊的权限,分别是setuid.setgid和stick bit 1.setuid.setgid 先看个实例,查看你的/usr/b ...

使用wget -i下载多个文件

使用wget -i下载多个文件 命令: wget -i filelist.txt 说明: 首先,保存一份下载链接文件 cat > filelist.txt url1 url2 url3 url4

MRC的下setter访问器的两种形式

// Person复合了Phone和Room // 第一种:比较合理 先判断对象形参传递的对象和原属性是否一致,不一致在释放旧值,给形参传递的值retain,因为retain方法会返回该对象,因此可以 ...

BZOJ 4518: [Sdoi2016]征途 [斜率优化DP]

4518: [Sdoi2016]征途 题意:\(n\le 3000\)个数分成m组,一组的和为一个数,求最小方差\(*m^2\) DP方程随便写\(f[i][j]=min\{f[k][j-1]+(s[ ...

sql stuff函数的语法和作用

sql stuff函数用于删除指定长度的字符,并可以在制定的起点处插入另一组字符.sql stuff函数中如果开始位置或长度值是负数,或者如果开始位置大于第一个字符串的长度,将返回空字符串.如果要删除 ...

前端 -----jQuery的选择器

02-jQuery的选择器   我们以前在CSS中学习的选择器有: 今天来学习一下jQuery 选择器. jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元 ...

多个git使用的 ssh key共存

ssh-keygen -t rsa -C "ljkj028@qq.com" 不要一直回车,指定密钥为 id_rsa_ljkj 默认为(id_rsa) 同理 创建其他密钥 打开ssh ...