优化回调地狱

最新推荐文章于 2022-11-15 21:57:43 发布

道可小花

最新推荐文章于 2022-11-15 21:57:43 发布

阅读量185

点赞数

分类专栏： jQuery：ajax

本文链接：https://blog.csdn.net/qq_33309944/article/details/91474486

版权

jQuery：ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

优化回调地狱

// then 
        (function () {
            return $.ajax({
                url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/power',
                type: 'POST',
                data: {
                    username: 'cst',
                    password: '123123'
                }
            });
        })()
        .then(function (res) {
            if (res.data.power == 'root') {
                return $.ajax({
                    url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieList',
                    type: 'GET',                    
                });
            }
        })
        .then(function (res) {
            var data = res.data;
            var $Wrapper = $('.wrapper');
            var df = $.Deferred();
            $.each(data, function(index, ele) {
                // ele.name  ele.poster
                var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
                $MovieSection
                    .data({id: ele.id})
                        .on('click', function () {
                            df.resolve( $(this) );
                        })   
                            .children()
                                .eq(0).attr('src', ele.poster)
                                    .next().text(ele.name);
                    $Wrapper.append($MovieSection);    
            });  
            return df.promise();                      
        })
        .then(function (dom) {
            return $.ajax({
                url: 'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieInfo',
                type: 'GET',
                data: {
                    movieId: dom.data('id')
                }  
            });    
        })
        .then(function (res) {
            var data = res.data;
            var direct = data.direct;
            var gut = data.gut;
            var mainActor = data.mainActor;
            var screenWriter = data.screenwriter;

            var htmlStr = '<div class="mask">\
                <p>导演: ' + direct + '</p>\
                <p>剧情: ' + gut + '</p>\
                <p>主演: ' + mainActor.reduce(function (prev, curv) {
                    prev += curv + ' ';
                    return prev;
                }, '') + '</p>\
                <p>编剧: ' + screenWriter.reduce(function (prev, curv) {
                    prev += curv + ' ';
                    return prev;
                }, '') + '</p>\
            </div>'