美文网首页
promise解决ajax的多重嵌套

promise解决ajax的多重嵌套

作者: 谢小逸 | 来源:发表于2017-08-30 17:09 被阅读0次

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

  1. 获取当前点击的cuskey值(相当于数据表的ID),用ajax 调用 invok/get 接口查询并记录对应的内容,var data222;
  2. 调用接口/invok/update/ 上传 dataa222 的参数并更新数据,成功后执行页面数值+1,并改变按钮图片
  3. 更新成功后,需要再次调用/invok/get 接口,获取当前操作用户所点赞的cuskey,
  4. 获取后,更新当前数据表中,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);
            }
        });
    })

相关文章

  • promise解决ajax的多重嵌套

    这是最近做点一个用户点赞的功能代码,思路: 获取当前点击的cuskey值(相当于数据表的ID),用ajax 调用 ...

  • Promise简介

    学promise来我这里肯定没错了ECMAScript promise的到来就是为了解决AJAX嵌套的请求 pro...

  • Promise

    Promise它是JS内置的 写AJAX嵌套的时候,可能会陷入不停回调 . 解决方法就是 尝试把他们拆开 Prom...

  • 解决异步问题——promise

    promise介绍 promise主要是为了解决嵌套回调的问题,使代码更加简洁,promise将嵌套的回调函数改成...

  • Promise之我见

    Promise之我见 1、Promise的含义 Promise是异步编程的一种解决方案,用来解决函数的嵌套,也就是...

  • Promise以及ajax嵌套

    Promise可以解决异步回调,不过从我使用来说,只适合于不同回调的嵌套或者更确切的说是有限的回调请求嵌套,而不适...

  • 《Promise》

    1、初识Promise Promise 是异步操作的一种解决方案Promise 一般用来解决层层嵌套的回调函数(回...

  • Promise 基础用法

    Promise ,为什么会出现它,Promise 的出现,解决了哪些问题呢? 解决了回调地狱(嵌套)的问题,不会导...

  • Promise和Observable的映射

    前言 promise解决了嵌套地狱的问题,Observable解决了promise只有一个结果,和不可以取消的问题...

  • fetch API 的基本使用

    fetch Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一...

网友评论

      本文标题:promise解决ajax的多重嵌套

      本文链接:https://www.haomeiwen.com/subject/dblxjxtx.html