promise

相关状态

pending
fulfilled
rejected

基本操作

<script>
    console.log('start');
    new Promise(resolve => {
        setTimeout(function () {
            resolve('test')
        },2000);
    })
        .then(value =>{
            console.log(value)
        });
</script>

内部返回

<script>
    console.log('start');
    new Promise(resolve => {
        setTimeout(function () {
            resolve('test')
        },2000);
    })
        .then( value => {
            console.log(value)
            return new Promise( resolve => {
               setTimeout(function () {
                   resolve('chenfan');
               },2000);
            });
        })
        .then(value =>{
            console.log(value)

        });
</script>

利用变量传递

<script>
    console.log('start');

    var promise = new Promise( resolve => {
       setTimeout(function () {
           console.log('HH');
           resolve('hello world');
       },1000);
    });
    setTimeout(() => {
       promise.then( value => {
           console.log(value);
       })
    },3000);
</script>

return false 进行返回

<script>
    console.log('start');
    new Promise( resolve => {
       setTimeout(() =>{
           resolve("HH");
       },3000);
    })
        .then( value => {
            console.log(value);
            {
                new Promise( resolve => {
                    setTimeout(() =>{
                        resolve('123');
                    },3000);
                });
            }
            return false
        })
        .then( value => {
            console.log(value);
        })
</script>

抛出异常

<script>
    console.log('start');
    new Promise( resolve => {
        setTimeout(() =>{
            throw new Error('test error');
        })
    })
        .then( value => {
            console.log(value);
        })
        .catch( error => {
            console.log(error);
        })
</script>

promise.all

<script>
    console.log('start');
    Promise.all([1,2,3])
        .then( all => {
            console.log("1", all);
            return Promise.all([function () {
                console.log('sssss');
            },'ddddd',false])
        })
        .then( all => {
            console.log('2',all);
            let p1 = new Promise( resolve => {
                setTimeout(() => {
                    resolve("p1");
                },1500);
            });
            let p2 = new Promise( resolve => {
                setTimeout(() => {
                    resolve("p2");
                },1450);
            });
            return Promise.all([p1,p2]);
        })
        .then( all => {
            let p1 = new Promise( resolve => {
                setTimeout(() => {
                    resolve("pp1");
                },1500);
            });
            let p2 = new Promise( (resolve,reject )=> {
                setTimeout(() =>{
                   reject("pp2");
                },1000);
            });
            let p3 = new Promise( (resolve,reject ) => {
                setTimeout(() => {
                   reject("pp3");
                },400);
            });
            return Promise.all([p1,p2,p3]);
        })
        .then( value => {
            console.log('11')
        })
        .catch( err => {
            console.log(err);
        })
</script>

队列

forEach

    <script>
        function queue(things) {
            // 初始值
            let promise = Promise.resolve();
            things.forEach( thing => {
                promise = promise.then( () => {
                   return new Promise( resolve => {
                       // 异步处理
                       resolve();
                   });
                });
            });
            return promise;
        }
    </script>

reduce

    <script>
        function queue(things) {
            return things.reduce( (promise,thing) => {
                return promise.then( () => {
                    return new Promise( resolve => {
                        // 异步处理
                        resolve();
                    })
                })
            // 初始值
            },Promise.resolve());
        }
    </script>

谁先返回？

<script>
    let p1 = new Promise( resolve => {
        setTimeout( () => {
            resolve("p1");
        },10000);
    });
    let p2 = new Promise( resolve => {
       setTimeout(() => {
           resolve("p2");
       },5000);
    });

    Promise.race([p1,p2])
        .then( value => {
            console.log(value);
        })
</script>