Promise的各种常用【使用】场景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>es6</div>
        <script type="text/javascript">
            // what是Promise:Promise是ES6中提供的一个异步编程的解决方案,Promise本身是一个构造函数 typeof Promise  //  function
            // Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)
            // 异步操作成功,Promise对象传回一个值,状态变为resolved
            // 异步操作失败,Promise对象抛出一个错误,状态变为rejected
            /*
            一旦Promise状态改变,就不会再有变化,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled 或者 从pending变为rejected。
            只要这两种情况发生,状态就不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。
            如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的;
            Promise优点:
              在处理异步程序时,将异步操作队列化,按照期望的顺序执行,返回符合预期的结果,这样即使是多重异步操作,也可以方便的使用Promise进行链式调用
            Promise缺点:
              1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。
              2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
              3、当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
            */
            // 基本使用
            const promise = new Promise(function(resolve, reject) {
                console.log('Promise++++++++111111');
                // 执行一个异步操作
                setTimeout(() => {
                    console.log('Promise+setTimeout:最后输出')
                }, 3000)
                resolve('成功'); // 状态由等待变为成功,传的参数作为then函数中成功函数的实参
                // reject('失败');  // 状态由等待变为失败,传的参数作为then函数中失败函数的实参
                console.log('Promise++++++++222222');
            })
            // then中有2个参数,第一个参数是状态变为成功后应该执行的回调函数,第二个参数是状态变为失败后应该执行的回调函数。
            promise.then(res => {
                console.log('Promise++++++++444444');
                console.log('结果1:' + res) // 结果1:成功(如果是reject('失败')则打印结果是:失败)
            }, err => {
                console.log('错误1:' + err)
            }).then(res => {
                console.log('结果2:' + res) // 结果2:undefined
            }, err => {
                console.log('错误2:' + err)
            }).finally(() => {
                console.log('结束') // finally方法,finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作
            })
            console.log('333333');
            /*总结:上述依次打印 
                Promise++++++++111111
                Promise++++++++222222
                333333
                Promise++++++++444444
                结果1:成功
                结果2:undefined
                结束
                Promise+setTimeout:最后输出
            */
            /*==========================Promise.all()方法=================================*/
            // 多个 Promise
            const p1 = new Promise((resolve, reject) => {
                setTimeout(function() {
                    console.log('p1')
                    resolve('p1')
                }, 3000)
            })
            const p2 = new Promise((resolve, reject) => {
                setTimeout(function() {
                    console.log('p2')
                    resolve('p2')
                }, 5000)
            })
            // 多个异步操作
            Promise.all([p1, p2]).then((res) => {
                console.log('成功:' + res) // 成功:p1,p2
            })
            /*==========================Promise.race()方法=================================*/
            // race的用法, 语法和all()一样,但是返回值有所不同,race根据传入的多个Promise实例,只要有一个实例resolve或者reject,就只返回该结果,其他实例不再执行,
            // 也就是说多个异步程序,只返回响应最快的那个异步程序,不论成功或者失败,就把最快响应的返回值返回,后面的异步程序不再执行
            const p4 = new Promise((resolve, reject) => {
                setTimeout(function() {
                    console.log('p4')
                    resolve('p4')
                }, 9000)
            })

            const p5 = new Promise((resolve, reject) => {
                setTimeout(function() {
                    console.log('p5')
                    reject('p5')
                }, 6000)
            })

            Promise.race([p4, p5]).then().catch(res => {
                console.log('失败:' + res) // p5 失败:p5 p4
            })
            /*==========================Promise.resolve()方法=================================*/
            // Promise的resolve方法,用于将非Promise类型的对象,转为Promise对象,这样就可以调用Promise原型对象上的方法了
            // 没有参数,如果没有参数,这直接返回一个resolved状态的Promise对象 
            const p7 = Promise.resolve()
            // 相当于 
            const p8 = new Promise(resolve => {
                resolve(undefined)
            })
            p7.then(res => {
                console.log('p7-resolve()没有参数时候等价与:' + res) // 输出 undefined
            })
            // 参数是一个不具有then方法的对象,或者是一个基数数据类型的值,则Promise.resolve方法返回一个新的 Promise 对象,状态为resolved,值为指定值
            const p9 = Promise.resolve('123')
            p9.then(res => {
                console.log('p9-resolve()有参数时候等价与:' + res) // 输出 '123'
            })
            // 参数是一个具有then方法的对象,Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法
            const obj = {
                then: function(resolve, reject) {
                    resolve(100)
                }
            }
            const p10 = Promise.resolve(obj)
            p10.then(res => {
                console.log(res) // 100
            })
            // 特别的:参数是一个Promise对象,那么将原封不动的返回这个Promise对象

            // reject与resolve方法基本类似,但是要注意一种情况,就是当参数是一个thenable对象时
            const thenable = {
                then(resolve, reject) {
                    reject('出错了');
                }
            };
            Promise.reject(thenable)
                .catch(e => {
                    console.log(e === thenable) // true
                })
        </script>
    </body>
</html>

 

posted @ 2020-09-08 19:38  鱼樱前端  阅读(1341)  评论(0编辑  收藏  举报