Promise的相关知识

FGGIT

发布于 2024-10-15 16:26:36

7100

代码可运行

运行总次数：0

代码可运行

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-10-15，如有侵权请联系 cloudcommunity@tencent.com 删除

对象