ajax嵌套ajax的坏处,promise解决ajax的多重嵌套

这是最近做点一个用户点赞的功能代码,思路:

获取当前点击的cuskey值(相当于数据表的ID),用ajax 调用 invok/get 接口查询并记录对应的内容,var data222;

调用接口/invok/update/ 上传 dataa222 的参数并更新数据,成功后执行页面数值+1,并改变按钮图片

更新成功后,需要再次调用/invok/get 接口,获取当前操作用户所点赞的cuskey,

获取后,更新当前数据表中,zan这个数组的数据(存点赞了那些cuskey);

源代码:

$.ajax({

url: '/invok/get/',

type: 'POST',

data: { actid: '2017082121470227', keytype: '3', cuskey: cuskeysss },

dataType: 'json',

success: function(data) {

// console.log(data);

count1 = JSON.parse(data.Data.JsonContent).count;

var data222 = {

cuscode: JSON.parse(data.Data.JsonContent).cuscode,

content: JSON.parse(data.Data.JsonContent).content,

count: count1 + 1,

satus: JSON.parse(data.Data.JsonContent).satus,

Sort: JSON.parse(data.Data.JsonContent).Sort,

cuskeya: JSON.parse(data.Data.JsonContent).cuskeya,

name: JSON.parse(data.Data.JsonContent).name,

img: JSON.parse(data.Data.JsonContent).img,

};

$.ajax({

url: '/invok/update/',

type: 'POST',

data: { actid: '2017082121470227', keytype: '3', cuskey: cuskeysss, jsoncontent: JSON.stringify(data222) },

dataType: 'json',

success: function(data) {

// show();

$(obj).find("img").attr("src", "http://i2.mbscss.com/img/moonbasa/2017/ydw/M8_21_203200.jpg");

$(obj).removeAttr('onclick');

$(obj).find(".btn2").html(count1 + 1);

//插入点赞数组

$.ajax({

url: '/invok/get/',

type: 'POST',

data: { actid: '2017008821142411112', keytype: '3', cuskey: $.cookie('MoonbasaT_Cuscode') },

dataType: 'json',

success: function(data) {

var arr = JSON.parse(data.Data.JsonContent).zan;

arr.push(cuskeysss);

var data333 = {

zan: arr,

};

$.ajax({

url: '/invok/update/',

type: 'POST',

data: { actid: '2017008821142411112', keytype: '3', cuskey: $.cookie('MoonbasaT_Cuscode'), jsoncontent: JSON.stringify(data333) },

dataType: 'json',

success: function(data) {

// console.log(data);

}

});

}

});

}

});

}

});

可以看到,嵌套了很多层,代码的可读性十分的差,所以我用promise优化了下代码:

var ajaxPromise = new Promise(function(resolve) {

resolve();

});

ajaxPromise.then(function() {

return $.ajax({

url: '/invok/get/',

type: 'POST',

data: { actid: '2017082121470227', keytype: '3', cuskey: cuskeysss },

dataType: 'json',

success: function(data) {

console.log(data);

return data;

}

});

}).then(function(data) {

console.log(data);

var count1 = JSON.parse(data.Data.JsonContent).count;

var data222 = {

cuscode: JSON.parse(data.Data.JsonContent).cuscode,

content: JSON.parse(data.Data.JsonContent).content,

count: JSON.parse(data.Data.JsonContent).count + 1,

satus: JSON.parse(data.Data.JsonContent).satus,

Sort: JSON.parse(data.Data.JsonContent).Sort,

cuskeya: JSON.parse(data.Data.JsonContent).cuskeya,

name: JSON.parse(data.Data.JsonContent).name,

img: JSON.parse(data.Data.JsonContent).img,

};

$.ajax({

url: '/invok/update/',

type: 'POST',

data: { actid: '2017082121470227', keytype: '3', cuskey: cuskeysss, jsoncontent: JSON.stringify(data222) },

dataType: 'json',

success: function(data) {

// show();

$(obj).find("img").attr("src", "http://i2.mbscss.com/img/moonbasa/2017/ydw/M8_21_203200.jpg");

$(obj).removeAttr('onclick');

$(obj).find(".btn2").html(count1 + 1);

}

});

}).then(function() {

return $.ajax({

url: '/invok/get/',

type: 'POST',

data: { actid: '2017008821142411112', keytype: '3', cuskey: $.cookie('MoonbasaT_Cuscode') },

dataType: 'json',

success: function(datas) {

return datas;

}

});

}).then(function(datas) {

var arr = JSON.parse(datas.Data.JsonContent).zan;

arr.push(cuskeysss);

var data333 = {

zan: arr,

};

$.ajax({

url: '/invok/update/',

type: 'POST',

data: { actid: '2017008821142411112', keytype: '3', cuskey: $.cookie('MoonbasaT_Cuscode'), jsoncontent: JSON.stringify(data333) },

dataType: 'json',

success: function(data) {

// console.log(data);

}

});

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值