提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

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

常用 场景 各种 Promise 使用
2023-09-27 14:26:17 时间 
<!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>

 

相关文章