Promise简记

2019-06-20 19:52:59 阅读：164 来源： 互联网

标签：function resolve console log 简记 Promise return

Promise

"回调地狱"

function d() {
    console.log("hi")
}

d(function() {
    console.log(2)
    
    d(function() {
        console.log(3)
        
        d(function(){
            console.log(5)
            ......
        }
    }
})

 <script>
        let btn = document.querySelector("button")
        let box = document.querySelector("div")
    
        btn.addEventListener('click', e=> {
            moveTo(box,100,100).then(()=>{
                console.log("第一次移动")
                return moveTo(box,200,200)
            }).then(()=> {
                console.log("第二次移动")
                return moveTo(box,300,300)
            }).then(()=> {
                console.log("第三次移动")
                return moveTo(box,400,400)
            })
        })
        
        function moveTo(el,x,y){
            return new Promise((res)=> {
                el.style.transform = `translate(${x}px,${y}px)`
                setTimeout(function(){
                    res()
                    box.textContent = `我移动了${x}px`
                },1000)
            
            })}
    // 小方块的移动

// promise实现图片的加载

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise</title>
    <style>
        div {
            width:180px;
            height: 180px;
            background: burlywood;
            transition: all 1s;
            text-align: center;
            font-size: 38px;
        }
        .wrap {
            transition: all 1s;
            width:100%;
            height:200px;
            background: #444;
        }
        img {
            float: left;
            height: 200px;
            width: 31%;
        }
    </style>
</head>
<body>
    <!-- <div></div>
    <button>点击</button> -->
    <div class="wrap"></div>
    <script>
        let URL = ['http://climg.mukewang.com/5b16558d00011ed506000338.jpg',
              'http://climg.mukewang.com/5b165603000146ca06000338.jpg ',
              'http://climg.mukewang.com/5b1656140001c89906000338.jpg' ]

        let i = 0
        function loadImg(URL) {
            return new Promise((res,rej) => {
                if(i<=3) {
                    setTimeout(()=>{
                        res(URL[i++]) 
                    },1000)
                } else {
                    console.log("停止！")
                }
            })
        }

        let wrap = document.querySelector(".wrap")
        loadImg(URL).then(function (url) {
            let img = document.createElement("img")
            img.src = url
            wrap.appendChild(img)
            return loadImg(URL)
        }).then(function (url) {
            let img = document.createElement("img")
            img.src = url
            wrap.appendChild(img)
            return loadImg(URL)
        }).then(function (url) {
            let img = document.createElement("img")
            img.src = url
            wrap.appendChild(img)
        })
        .catch(e => {
            console.log(e)
        })

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

链式调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
    
    
    function cook() {
        console.log('开始做饭。');
        var p = new Promise(function(resolve, reject){ 
            setTimeout(function() {
                console.log('做饭完毕！');
                resolve('鸡蛋炒饭');
            }, 1000);
        });
        return p;
    }
    
    function eat(data) {
        console.log('开始吃饭：' + data);
        var p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                console.log('吃饭完毕!');
                resolve('一块碗和一双筷子');
            }, 2000);
        });
        return p;
    }
    function wash(data) {
        console.log('开始洗碗：' + data);
        var p = new Promise(function(resolve, reject) { 
            setTimeout(function() {
                console.log('洗碗完毕!');
                resolve('干净的碗筷');
            }, 2000);
        });
        return p;
}
    cook().then((e)=>{
        return eat(e)
    }).then((e)=>{
        console.log(e)
        return wash(e)
    })

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

1561018541974

错误处理

function cb(value) {
    return new Promise((res,rej)){
            if(value) resolve(value)
            else reject(value)
        }
}

cb(false).then(res=>console.log(res),rej=>console.log(rej))

.then(resolve,reject)两个处理函数

.catch(e => { console.log(e)}) 捕获未作处理的错误！

.finaly(e => {console.log(e)}) 最终肯定会被执行的步！

Promise的三种状态

pending
fulfilled
rejected

Promise.all()

Promise.all([promise1,promise2,promise3])

当里面的promise的实例全部成功时返回对应参数，有一个失败会返回对应的失败参数

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

是空数组时会直接返回成功！

Promise.race（）

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。(谁先解决或者失败则结束返回先处理完的值)

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});

var promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);
  //都是resolve，但是promise2速度快！
});
// 最终输出: "two"

空数组不会被处理！

Promise.resolve()

Promise.reject()

Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。但如果这个值是个thenable（即带有then方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态（指resolved/rejected/pending/settled）；如果传入的value本身就是promise对象，则该对象作为Promise.resolve方法的返回值返回；否则以该值为成功状态返回promise对象。

（包裹后会返回一个Promise对象）

将同步任务通过Promise转换为异步任务！

function createAsyncTask(syncTask){
    return Promise.resolve(syncTask).then(syncTask => syncTask())
}

createAsyncTask(()=> {
    console.log("异步任务")
    return 1+1
}).then(res=>{
    console.log(res)
})

console.log("同步任务")

习题（页面中有个板块，需要多张图片加载后才能显示)

Array.map()

标签：function,resolve,console,log,简记,Promise,return
来源： https://www.cnblogs.com/daixixi/p/11060893.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9