ajax.then()用法,使用es6的then()方法封装jquery的ajax请求

最新推荐文章于 2024-05-14 00:20:38 发布
最新推荐文章于 2024-05-14 00:20:38 发布
阅读量2.8k 收藏 2
点赞数 1
文章标签： ajax.then()用法

使用场景：

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

jpdata
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端AJAX基础
qq_45149045的博客
11-23 1453
AJAX Ajax的概念： Ajax用来实现客户端网页请求服务器的数据，当用户有操作时可以实时更新部分模块或者整个网页 axios基本语法： 模板： axios({ method: '', url: '', }).then((result) => { //.then 用来指定请求成功之后的回调函数 // 形参中的result是请求成功之后的结果 })； then方法（或回调函数）负责接受发过来的数据 属性区分大小
ajax的.then怎么用,promise.then如何处理连续ajax请求
weixin_42452328的博客
08-06 1157
function a(callback) {var xhr, results, url;url = 'http://example.com/search';xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.onload = function (e) {if (this.status === 200) {results = JSON....
2024年前端最新异步编程Ajax的详解，并对其进行封装整理，面试训练app
最新发布
2401_84619606的博客
05-14 893
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
then和$.when在ajax中的使用
qq_38888512的博客
04-14 4203
then 在then中可以分别注册，成功，失败，进行中的函数。在Jq的链式调用then的时候，只有返回一个promise时，下一个then注册的回调函数才能使用回调结果，否则只会依次触发回调函数而没有回调结果。 案例： 不用then $.ajax({ url:'https://autumnfish.cn/api/hero/simple', type:'get'...
ajax请求then和done的区别,jQuery的延迟和承诺-.then（）与.done（）
weixin_42552124的博客
08-05 787
我一直在阅读有关jQuery递归和诺言的文章，但看不到使用.then()和.done()进行成功回调的区别。 我知道Eric Hynds提到.done()和.success()映射到相同的功能，但是我猜.success()也是这样.then()因为所有回调都在成功完成操作时被调用。有人可以启发我正确使用吗？#1楼返回结果的处理方式也有所不同(称为链接， done不链接， then生成调用链)pro...
jquery ajax.then,神奇的then方法——jQuery回调、递延对象总结
weixin_36251052的博客
08-05 1459
原标题：神奇的then方法——jQuery回调、递延对象总结前言：什么叫做递延对象，生成一个递延对象只需调用jQuery.Deferred函数，deferred这个单词译为延期，推迟，即延迟的意思，那么在jQuery中又是如何表达延迟的呢，从递延对象中的then方法或许能找到这种延迟的行为，本文重点解读递延对象中的then方法神奇的then方法在实际项目应用中，一个页面或许有多个ajax请求，你可...
ajax请求then和done的区别,成功和$ .ajax的.done（）方法之间有什么区别
weixin_33821493的博客
08-05 924
success仅在AJAX调用成功时触发，即最终返回HTTP 200状态。 error如果失败则触发，complete当请求结束时触发，无论成功与否。在jQuery中1.8 jqXHR对象success(由$.ajax返回)上替换为done，error与fail和complete与always。但是你应该仍然可以用旧的语法初始化AJAX请求。因此，这些做类似的事情：// set success a...
day6_ajax01.zip
06-28
8. **AJAX与前端框架**：现代前端框架如React、Vue和Angular都有自己的封装好的Ajax库，如React的`fetch` API、Vue的`axios`或Angular的`HttpClient`，简化了Ajax的使用。 9. **jQuery中的Ajax**：jQuery提供了一个...
ajax异步回调函数中给外部变量赋值的问题探讨
12-07
或者，如果您希望在全局作用域或更上层作用域中使用`Ajax`请求的结果，可以考虑使用Promise或者async/await语法（需要在支持ES6的环境中）： ```javascript $(function() { let str = "aaa"; async function ...
详解jQuery中的deferred对象的使用（一）
10-22
jQuery的`$.ajax()`函数默认返回一个`deferred`对象，这意味着你可以直接在`.ajax()`调用后链式调用`.done()`, `.fail()`, 或 `.then()`等方法。例如： ```javascript $.ajax('test.json') .done(function(resp) {...
ajax小例子
01-02
jQuery的Ajax封装 jQuery库提供了更简洁的Ajax接口，例如`$.get()`和`$.post()`： ```javascript // GET 请求 $.get('server.php', {param1: 'value1'}, function(response) { console.log(response); }); // ...
jAJAX:适用于多种环境的类似jQuery的AJAX方法
05-22
杰贾克斯 适用于多种环境的类似jQuery的AJAX方法：浏览器，chrome扩展名，safari扩展名，firefox扩展名。 您甚至可以在带有Node.js中使用它。 用法 jajax ( options : object , ondone : function , onerror : function ) // or in Promise mode jajax ( options : object ) . then ( onresolve , onreject ) /* where * options is "url" or {url:"url", dataType:"type", method: "GET", ...}, similar to jQuery.ajax(options) * * function ondone(result, statusTe
AJAXproject:Udacity课程的API AJAX项目
05-24
在AJAX请求中，你可以使用`$.ajax().then()`链式调用来处理成功和失败的情况。 ### 9. 跨域请求(CORS) 由于同源策略的限制，AJAX请求通常只能访问同一域名下的资源。然而，通过服务器配置CORS（Cross-Origin ...
ajax请求then和done的区别,jQuery.ajax处理继续响应：“成功：”还是“ .done”？
weixin_35719180的博客
08-05 600
小编典典success一直是jQuery中成功回调的传统名称，定义为ajax调用中的一个选项。但是，由于实现了$.Deferreds更复杂的回调，因此done是实现成功回调的首选方法，因为可以在any上调用它deferred。例如，成功：$.ajax({url: '/',success: function(data) {}});例如，完成：$.ajax({url: '/'}).done(funct...
Ajax学习
qq_44998582的博客
12-02 229
Ajax AJAX简介 全称：Asynchronous JavaScript And XML,异步的JS和XML 通过AJAX可以在浏览器中向服务器发送异步请求，无需刷新就能获取数据 能在页面不刷新的情况下向http发送请求，得到http响应 应用场景 页面上拉加载更多数据 列表数据无刷新分布 表单项离开焦点时数据验证 搜索框提示文字下拉列表 AJAX的特点 AJAX的优点 无需刷新页面而与服务器进行通信 允许根据用户事件来更新部分页面内容
原生AJAX、JQuery中的ajax、axios、then、实例、拦截器
qq_51066068的博客
06-05 470
AJAX、JQuery、axios、then、实例、请求拦截器interceptors
$.ajax()方法详解
热门推荐
上善若泪
09-06 8万+
目录 1 Ajax操作 1.1 $.ajax 1.2 简便写法 1.2.1 $.get()，$.post() 1.2.2 $.getJSON() 1.2.3 $.getScript() 1.3 Ajax事件 1.4 返回值 1.5 中文乱码 1.5.1 解决方法一 1.5.2 解决方法二 1 Ajax操作 1.1 $.ajax jQuery对象上面还定义了Ajax方法（$.ajax()），用来处理Ajax操作。调用该方法后，浏览器就会向服务器发出一个HTTP请求。 $.aj
jquery ajax.then,jquery中done和then的区别(详解)
weixin_29446109的博客
08-05 606
jquery的deferred对象的done方法和then方法都能实现链式调用，但是他们的作用是有区别的，then方法中如果你传递的方法有返回值，那么他会传递给下一个链式调用的方法。而done方法与此相反，你传递的方法就算有返回值，done方法也不会把你的返回值传给下一个链式调用的方法的，话不多说，直接上实例：var defer = jQuery.Deferred();defer.done(fun...
ajax如何封装请求方法promise
04-27
可以使用ES6中的Promise对象来封装ajax请求方法，具体步骤如下： 1. 创建一个Promise对象，该对象接受一个函数作为参数，该函数包含两个参数resolve和reject。 2. 在该函数中，使用XMLHttpRequest对象发起ajax请求，并在请求成功或失败时调用resolve和reject方法。 3. 将XMLHttpRequest对象的open、send和onreadystatechange方法封装到一个函数中，该函数返回一个Promise对象。 4. 在调用该函数时，使用then方法来处理请求成功或失败的情况。 下面是一个简单的封装ajax请求方法的示例代码： ```javascript function ajax(url, method, data) { return new Promise(function(resolve, reject) { const xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.status); } } }; xhr.send(JSON.stringify(data)); }); } ``` 在调用该方法时，可以使用then方法来处理请求成功或失败的情况： ```javascript ajax('/api/user', 'POST', {name: 'John', age: 30}) .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); ``` 以上代码中，ajax函数返回一个Promise对象，当请求成功时，resolve方法会返回响应数据；当请求失败时，reject方法会返回错误状态码。在调用ajax函数时，使用then方法来处理请求成功的情况，使用catch方法来处理请求失败的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值