Promise的相关知识

于 2023-01-10 10:42:35 发布
阅读量108 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue学习笔记 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47888212/article/details/128625711

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。（ps:什么是原型：javascript中的原型与原型链_傻小胖的博客-CSDN博客_javascript原型和原型链）

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

promise的使用

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
     <script>
        //  使用setTimeout
        //  setTimeout(()=>{
        //     console.log("hellobug");
        //  },1000)
        
        //下面这执行顺序看起来很乱
        // setTimeout(()=>{
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     setTimeout(()=>{
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         setTimeout(()=>{
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //         },1000)
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     },1000)
        // console.log("hellobug2");
        // console.log("hellobug2");
        // },1000)


        // Promise 的参数中，resolve和reject本身就是函数
        //链式编程
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve();
            },1000)
        }).then(()=>{
            //第一次网络请求的代码
            console.log("hellobug1");
            console.log("hellobug1");
            console.log("hellobug1");
            console.log("hellobug1");
            console.log("hellobug1");
            console.log("hellobug1");
            new Promise((resolve,reject)=>{
                setTimeout(()=>{
                resolve();
            },1000)
            })
        }).then(()=>{
            //第二次网络请求的代码
            console.log("hellobug2");
            console.log("hellobug2");
            console.log("hellobug2");
            console.log("hellobug2");
            console.log("hellobug2");
            console.log("hellobug2");
            new Promise((resolve,reject)=>{
                setTimeout(()=>{
                resolve();
            },1000)
            })
        }).then(()=>{
            //第三次网络请求的代码
            console.log("hellobug3");
            console.log("hellobug3");
            console.log("hellobug3");
            console.log("hellobug3");
            console.log("hellobug3");
            console.log("hellobug3");
        })
        
        //什么情况下会用到promise      一般情况下是有异步操作时，使用promise对这个异步情况进行封装
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //成功时调用
                // resolve("请求成功");
                //失败时调用
                reject("请求失败");
            },1000)
        }).then((data)=>{
            console.log(data);
        }).catch((err)=>{
            console.log(err);
        })
     </script>
 </body>
 </html>

promise的例子

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
     <script>
        //  使用setTimeout
        //  setTimeout(()=>{
        //     console.log("hellobug");
        //  },1000)
        
        //下面这执行顺序看起来很乱
        // setTimeout(()=>{
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     setTimeout(()=>{
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         console.log("hellobug2");
        //         setTimeout(()=>{
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //             console.log("hellobug3");
        //         },1000)
        //     console.log("hellobug1");
        //     console.log("hellobug1");
        //     },1000)
        // console.log("hellobug2");
        // console.log("hellobug2");
        // },1000)


        // Promise 的参数中，resolve和reject本身就是函数
        //链式编程
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve();
            },1000)
        }).then(()=>{
            //第一次网络请求的代码
            console.log("hellobug1");
            console.log("hellobug1");
            console.log("hellobug1");
            console.log("hellobug1");
            console.log("hellobug1");
            console.log("hellobug1");
            new Promise((resolve,reject)=>{
                setTimeout(()=>{
                resolve();
            },1000)
            })
        }).then(()=>{
            //第二次网络请求的代码
            console.log("hellobug2");
            console.log("hellobug2");
            console.log("hellobug2");
            console.log("hellobug2");
            console.log("hellobug2");
            console.log("hellobug2");
            new Promise((resolve,reject)=>{
                setTimeout(()=>{
                resolve();
            },1000)
            })
        }).then(()=>{
            //第三次网络请求的代码
            console.log("hellobug3");
            console.log("hellobug3");
            console.log("hellobug3");
            console.log("hellobug3");
            console.log("hellobug3");
            console.log("hellobug3");
        })
        
        //什么情况下会用到promise      一般情况下是有异步操作时，使用promise对这个异步情况进行封装
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //成功时调用
                // resolve("请求成功");
                //失败时调用
                reject("请求失败");
            },1000)
        }).then((data)=>{
            console.log(data);
        }).catch((err)=>{
            console.log(err);
        })
     </script>
 </body>
 </html>

promise的另外处理方法

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
     <script>
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //成功时调用
                // resolve("请求成功");
                //失败时调用
                reject("请求失败");
            },1000)
        }).then((data)=>{
            console.log(data);
        },(err)=>{
            console.log(err);
        })
     </script>
 </body>
 </html>

promise的简便用法

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
     <script>
         //网络请求：aaa -> 自己处理返回的数据（10行代码），然后拼接aaa和111变成aaa111
         //网络请求：aaa111 -> 自己处理返回的数据（10行代码），然后拼接aaa111和222变aaa111222
         //网络请求：aaa111222 -> 自己处理返回的数据
         
        // new Promise((resolve)=>{
        //     setTimeout(()=>{
        //         //成功时调用
        //         resolve("aaa");
        //     },1000)
        // }).then(res=>{
        //     console.log(res,"第一层的10行处理代码");
            
        //     //对结果进行第一次处理
        //     return new Promise((resolve)=>{
        //         resolve(res+"111");
        //     })
        // }).then(res=>{
        //     console.log(res,"第二层的10行处理代码");
            
        //     //对结果进行第二次处理
        //     return new Promise((resolve)=>{
        //         resolve(res+"222");
        //     })
        // }).then(res=>{
        //     console.log(res,"第三层的10行处理代码");
        // })


        //new Promise(resolve => resolve(结果))简写      Promise.resolve(res+"111");
        // new Promise((resolve)=>{
        //     setTimeout(()=>{
        //         //成功时调用
        //         resolve("aaa");
        //         //失败时调用
        //     },1000)
        // }).then(res=>{
        //     console.log(res,"第一层的10行处理代码");
            
        //     //对结果进行第一次处理
        //     return Promise.resolve(res+"111");

        //     // return Promise.reject("错误信息");

        // }).then(res=>{
        //     console.log(res,"第二层的10行处理代码");
            
        //     //对结果进行第二次处理
        //     return Promise.resolve(res+"222");
        // }).then(res=>{
        //     console.log(res,"第三层的10行处理代码");
        // })//.catch(err=>{
        // //     console.log(err);
        // // })


        //省略掉Promise.resolve
        // new Promise((resolve,reject)=>{
        //     setTimeout(()=>{
        //         //成功时调用
        //         resolve("aaa");
        //         //失败时调用
        //         // reject("错误信息");
        //     },1000)
        // }).then(res=>{
        //     console.log(res,"第一层的10行处理代码");
            
        //     //对结果进行第一次处理
        //     // return res+"111";

        //     throw res;

        // }).then(res=>{
        //     console.log(res,"第二层的10行处理代码");
            
        //     //对结果进行第二次处理
        //     return res+"222";
        // }).then(res=>{
        //     console.log(res,"第三层的10行处理代码");
        // }).catch(err=>{
        //     console.log(err);
        // })
     </script>
 </body>
 </html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FGGIT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值