2023/3/16日笔记

少年别浪
51 阅读1分钟

19-1、Promise.resolve()和Promise.reject()

Promise.resolve()

  • 是成功状态 Promise 的一种简写形式

Promise.reject()

  • 是失败状态 Promise 的一种简写形式
  • 不管什么参数，都会原封不动地向后传递，作为后续方法的参数

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19-1、Promise.resolve()和Promise.reject()</title>
</head>

<body>
    <script>
        // 1.Promise.resolve()
        // 是成功状态 Promise 得到一种简写形式
        // new Promise(resolve => resolve('foo'));
        // 简写
        // Promise.resolve('foo');

        // 参数
        // 一般参数
        // Promise.resolve('foo').then(data => {
        //     console.log(data);
        // });

        // Promise
        // const p1 = new Promise(resolve => {
        //     setTimeout(resolve, 1000, '我被执行了')
        //     // 等同于
        //     // setTimeout(()=>{
        //     //     resolve('我被执行了');
        //     // },1000)
        // });
        // Promise.resolve(p1).then(data => {
        //     console.log(data);
        // });
        // 等价于
        // p1.then(data => {
        //     console.log(data);
        // });
        // console.log(Promise.resolve(p1) === p1);

        // new Promise(resolve => resolve(p1)).then(data => {
        //     console.log(data);
        // });

        // 具有 then 方法的对象
        // function func (obj) {
        //     obj.then(1,2);
        // }
        // func({
        //     then(resolve,reject) {
        //         console.log(a,b);
        //     }   
        // })
        // const thenable = {
        //     then(resolve,reject) {
        //         console.log('then');
        //         resolve('data');
        //         // reject('reason');
        //     }
        // };
        // Promise.resolve(thenable).then(
        //     data => console.log(data),
        //     err => console.log(err)
        // );
        // console.log(Promise.resolve(thenable));

        // 2.Promise.reject()
        // 失败状态 Promise 的一种简写形式
        // new Promise((resolve, reject) => {
        //     reject('reason')
        // });
        // 等价于
        // Promise.reject('reason');

        // 参数
        // 不管什么参数，都会原封不动地向后传递，作为后续方法的参数
        // const p1 = new Promise(resolve => {
        //     setTimeout(resolve, 1000, '我执行了');
        // });
        // Promise.reject(p1).catch(err => console.log(err));

        new Promise((resolve, reject) => {
            resolve(123);
        }).then(data => {
            // return data;
            // return Promise.resolve(data);

            return Promise.reject('reason');
        }).then(data => {
            console.log(data);
        }).catch(err => console.log(err));
    </script>
</body>

</html>

19-2、Promise.all()

有什么用

  • Promise.all() 关注多个 Promise 对象的状态变化
  • 传入多个 Promise 实例，包装成一个新的 Promise 实例返回

基本用法

  • Promise.all() 的状态变化与所有传入的 Promise 实例对象状态有关
  • 所有状态都变成 resolved，最终的状态才会变成 resolved
  • 只要有一个变成 rejected，最终的状态就变成 rejected

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19-2、Promise.all()
    </title>
</head>
<body>
    <script>
        // 有什么用
        // Promise.all() 关注多个 Promise 对象的状态变化
        // 传入多个 Promise 实例，包装成一个新的 Promise 实例返回

        // 2.基本用法
        const delay = ms => {
            return new Promise(resolve => {
                setTimeout(resolve,ms);
            });
        };

        const p1 = delay (1000).then(() => {
            console.log('p1完成了');

            return 'p1';
        });
        const p2 = delay (2000).then(() => {
            console.log('p2完成了');

            return 'p2';
        })

        // Promise.all() 的状态变化与所有传入的 Promise 实例对象状态有关
        // 所有状态都变成 resolved，最终的状态才会变成 resolved
        // 只要有一个变成 rejected，最终的状态就变成 rejected

        const p = Promise.all([p1,p2]);
        p.then(data => {
            console.log(data);
        },err => {
            console.log(err);
        });
    </script>
</body>
</html>

19-3、Promise.race()和Promise.allSettled()

Promise.race()

  • Promise.race() 的状态取决于第一个完成的 Promise 实例对象，如果第一个完成的成功了，那最终的就成功；如果第一个完成的失败了，那最终就失败

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19-3、Promise.race()和Promise.allSettled()</title>
</head>

<body>
    <script>
        const delay = ms => {
            return new Promise(resolve => {
                setTimeout(resolve, ms);
            });
        };
        
        const p1 = delay(1000).then(() => {
            console.log('p1完成了');
            
            return 'p1';
            // return Promise.reject('reason');
        });
        const p2 = delay(2000).then(() => {
            console.log('p2完成了');
            
            return 'p2';
            // return Promise.reject('reason2')
        });
        
        // 1.Promise.race()
        // Promise.race() 的状态取决于第一个完成的 Promise 实例对象，如果第一个完成的成功了，那最终的就成功；如果第一个完成的失败了，那最终就失败
        // const recePromise = Promise.race([p1, p2]);
        // recePromise.then(data => {
        //     console.log(data);
        // }, err => {
        //     console.log(err);
        // })

        // 2.Promise.allSettled()
        const allSettledPromise = Promise.allSettled([p1, p2]);
        allSettledPromise.then(data => {
            console.log('succ',data);
        }, err => {
            console.log(err);
        })
    </script>
</body>

</html>

20-1、Promise的注意事项

1.resolve 或 reject 函数执行后的代码

  • 推荐在调用 resolve 或 reject 函数的时候加上 return，不再执行它们后面的代码

2.Promise.all/race/allSettled 的参数问题

  • 参数如果不是 Promise 数组，会将不是 Promise 的数组元素转变成 Promise 对象
  • 不只是数组，任何可遍历的都可以作为参数
  • 数组、字符串、Set、Map、NodeList、arguments

Promise.all/race/allSettled 的错误处理

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20-1、Promise的注意事项</title>
</head>

<body>
    <script>
        // 1.resolve 或 reject 函数执行后的代码
        // 推荐在调用 resolve 或 reject 函数的时候加上 return，不再执行它们后面的代码
        // new Promise((resolve,reject)=> {
        //     return resolve(123);
        //     // return reject('reason');

        //     console.log('hi');
        // });

        // 2.Promise.all/race/allSettled 的参数问题
        // 参数如果不是 Promise 数组，会将不是 Promise 的数组元素转变成 Promise 对象
        // Promise.all([1,2,3]).then(datas => {
        //     console.log(datas);
        // });
        // 等价于
        // Promise.all([
        //     Promise.resolve(1),
        //     Promise.resolve(2),
        //     Promise.resolve(3),
        // ]).then(datas => {
        //     console.log(datas);
        // });

        // 不只是数组，任何可遍历的都可以作为参数
        // 数组、字符串、Set、Map、NodeList、arguments
        // Promise.all(new Set([1,2,3])).then(datas => {
        //     console.log(datas);
        // });

        // 3.Promise.all/race/allSettled 的错误处理
        const delay = ms => {
            return new Promise(resolve => {
                setTimeout(resolve, ms);
            });
        };
        
        const p1 = delay(1000).then(() => {
            console.log('p1完成了');
            
            return 'p1';
            // return Promise.reject('reason');
        })
        .catch(err => {
            console.log('p1',err);
        });
        const p2 = delay(2000).then(() => {
            console.log('p2完成了');
            
            return 'p2';
            // return Promise.reject('reason2')
        })
        .catch(err => {
            console.log('p2',err);
        });

        const allPromise = Promise.all([p1,p2]);
        allPromise.then(datas => {
            console.log(datas);
        })
    </script>
</body>

</html>

20-2、Promise的应用

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20-2、Promise的应用</title>
</head>
<body>
    <img src="“大美女”.gif" alt="">
    <script>
        // 1.异步加载图片
        const loadImgAsync = url => {
            return new Promise((resolve,reject) => {
                const img = new Image();

                img.onload = () => {
                    resolve(img);
                };

                img.onerror = () => {
                    reject(new Error(`Could not load image at ${url}`));
                };

                img.src = url;
            });
        };

        const imgDOM = document.querySelector('img')
        loadImgAsync('仓鼠.gif').then(img => {
            console.log(img.src);
            setTimeout(() => {
                imgDOM.src = img.src;
            }, 1000);
            
        }).catch(err => {
            console.log(err);
        });
    </script>
</body>
</html>
avatar
文章
阅读
粉丝