js promise

最新推荐文章于 2024-01-29 21:07:32 发布

xinxin_zhu

最新推荐文章于 2024-01-29 21:07:32 发布

阅读量122

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/xinxin_zhu/article/details/105069736

版权

javascript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<html>

<head>
    <title>promise</title>
    <meta charset="utf-8">
    <style>

    </style>
</head>

<body>
    <h1>同步和异步 </h1>
    <P>同步会阻塞 异步不会阻塞</P>
    <P>异步用在网络请求ajax setTimeout</P>
    <P>promise不是解决回调 是解决ajax多层嵌套</P>
</body>

</html>
<script src="../js/jquery.min.js"></script>
<script>
    //手写promise 加载一张图片

    function LoadImg(src) {
        return new Promise(
            (resolve, reject) => {
                const img = document.createElement('img')
                img.onload = () => {  //定义异步正常执行
                    resolve(img)
                }
                img.onerror = () => {
                    const err = new Error(`图片加载失败 ${src}`)
                    reject(img)
                }
                img.src = src; //立刻执行渲染显示图片
            }
        )
    }

    const src1 = 'http://a4.att.hudong.com/21/09/01200000026352136359091694357.jpg'
    const src2 = 'http://a1.att.hudong.com/05/00/01300000194285122188000535877.jpg'
    LoadImg(src1).then(img => {  //then 是promise的方法 resolve 的时候执行 catch 也是promise的方法 在reject的时候执行
        console.log(img.height)
        return img
    }).then((img) => {
        console.log(img.width)
        return LoadImg(src2)
    }).then((img) => {
        console.log(img.height)
        return img
    }).then((img) => {
        console.log(img.width)
    }).catch((err) => {
        console.log(err)
    })


</script>

xinxin_zhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js promise

<html><head> <title>promise</title> <meta charset="utf-8"> <style> </style></head><body> <h1>同步和异步 </h1> ...
复制链接

扫一扫