js 异步解决方案 $.Deferred、Ajax、Promise

最新推荐文章于 2025-07-20 09:07:03 发布

阅读量882

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

21 篇文章

订阅专栏

本文通过具体实例介绍了jQuery中Deferred对象的使用方法，并演示了如何利用Promise处理异步操作，包括图片加载、Ajax请求等场景。

$.Deferred

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>deferred test</p>

    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript">
        
        // var wait = function () {
        //     var task = function () {
        //         console.log('执行完成')
        //     }
        //     setTimeout(task, 2000)
        // }
        // wait()

        // 已经封装好的（A 员工）
        function waitHandle() {
            // 定义
            var dtd = $.Deferred()
            var wait = function (dtd) {
                var task = function () {
                    console.log('执行完成')
                    // 成功
                    dtd.resolve()
                    // 失败
                    // dtd.reject()
                }
                setTimeout(task, 1000)
                // wait 返回
                return dtd.promise()
            }
            // 最终返回
            return wait(dtd)
        }

        // 使用（B 员工）
        var w = waitHandle()  // promise 对象
        $.when(w).then(function () {
            console.log('ok 1')
        }, function () {
            console.log('err 1')
        })

    </script>
</body>
</html>

Ajax

console.log('start')
var i, sum = 0;
for (i = 0; i < 1000000000; i++) {
    sum++
}
console.log(sum)

console.log(100)
alert('hello world')
console.log(200)

console.log(100)
setTimeout(function () {
    console.log(200)
}, 1000)
console.log(300)
console.log(400)

console.log(100)
$.ajax({
    url: './data.json',
    success: function (result) {
        console.log(result)
    }
})
console.log(300)
console.log(400)

setTimeout(function () {
    console.log(100)
})
console.log(200)

setTimeout(function () {
    console.log(1)
}, 1000)
setTimeout(function () {
    console.log(2)
})
console.log(3)

$.ajax({
    url: './data.json',
    success: function () {
        console.log('a')
    }
})
setTimeout(function () {
    console.log('b')
}, 1000)
setTimeout(function () {
    console.log('c')
})
console.log('d')

var ajax = $.ajax({
    url: './data.json',
    success: function () {
        console.log('success 1')
        console.log('success 2')
        console.log('success 3')
    },
    error: function () {
        console.log('error')
    }
})

var ajax = $.ajax('./data.json')
ajax.done(function () {
    console.log('success a')
}).fail(function () {
    console.log('fail 1')
}).done(function () {
    console.log('success b')
}).fail(function () {
    console.log('fail 2')
}).done(function () {
    console.log('success c')
}).fail(function () {
    console.log('fail 3')
})

var ajax = $.ajax('./data.json')
ajax.then(function () {
    console.log('success 100')
}, function () {
    console.log('fail 100')
}).then(function () {
    console.log('success 200')
}, function () {
    console.log('fail 200')
}).then(function () {
    console.log('success 300')
}, function () {
    conso3le.log('fail 00')
})

Promise

 function loadImg(src) {
     var promise = new Promise(function (resolve, reject) {
         var img = document.createElement('img')
         img.onload = function () {
             resolve(img)
         }
         img.onerror = function () {
             reject('图片加载失败')
         }
         img.src = src
     })
     return promise
 }

 // var src = 'https://www.imooc.com/static/img/index/logo_new.png'
 // var result = loadImg(src)
 // result.then(function (img) {
 //     console.log(1, img.width)
 //     return img
 // }, function () {
 //     console.log('error 1')
 // }).then(function (img) {
 //     console.log(2, img.height)
 // })

 // var src = 'https://www.imooc.com/static/img/index/logo_new.png'
 // var result = loadImg(src)
 // result.then(function (img) {
 //     console.log(1, img.width)
 //     return img
 // }).then(function (img) {
 //     console.log(2, img.height)
 // }).catch(function (ex) {
 //     // 统一捕获异常
 //     console.log(ex)
 // })

 // var src1 = 'https://www.imooc.com/static/img/index/logo_new.png'
 // var result1 = loadImg(src1)
 // var src2 = 'https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg'
 // var result2 = loadImg(src2)
 // result1.then(function (img1) {
 //     console.log('第一个图片加载完成', img1.width)
 //     return result2  // 重要！！！
 // }).then(function (img2) {
 //     console.log('第二个图片加载完成', img2.width)
 // }).catch(function (ex) {
 //     console.log(ex)
 // })

 var src1 = 'https://www.imooc.com/static/img/index/logo_new.png'
 var result1 = loadImg(src1)
 var src2 = 'https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg'
 var result2 = loadImg(src2)
 Promise.all([result1, result2]).then(function (datas) {
     console.log('all', datas[0])
     console.log('all', datas[1])
 })
 Promise.race([result1, result2]).then(function (data) {
     console.log('race', data)
 })