Promise的使用

异步请求嵌套

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script>

        // 第一次网络请求
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 1000);
        }).then(() => {
            console.log("Hello Wolrd");

            // 第二次网络请求
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                }, 1000);
            }).then(() => {
                console.log("Hello Wolrd");

                // 第三次网络请求
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                    }, 1000);
                }).then(() => {
                    console.log("Hello Wolrd");
                })
            })
        });
    </script>
</head>

<body>
    <div id="my">

    </div>

</body>

</html>

 成功和失败

    <script>

        new Promise((resolve, reject) => {
            setTimeout(() => {
               // resolve("Hello world") // 成功
               // 失败
               resolve("error message");
            }, 1000);
        }).then((data) => {
            console.log(data);       
        }).catch((error)=> {
            console.log(error);
        });
    </script>

 链式嵌套

    <script>

        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("hello world");
            }, 1000)
        }).then((res) => {
            console.log(res+" 第一层代码");
            return Promise.resolve(res ," 111");
        }).then((res) => {
            console.log(res+" 第二层代码");
            return Promise.resolve(res , " 222");
        }).then((res) => {
            console.log(res+" 第三层代码");
            console.log(res, " 333");
        });
    </script>

简写

   <script>

        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("hello world");
            }, 1000)
        }).then((res) => {
            console.log(res+" 第一层代码");
            return (res +" 111");
        }).then((res) => {
            console.log(res+" 第二层代码");
            return (res + " 222");
        }).then((res) => {
            console.log(res+" 第三层代码");
            console.log(res+ " 333");
        });
    </script>

 异常

    <script>

        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("hello world");
            }, 1000)
        }).then((res) => {
            console.log(res+" 第一层代码");
           // return Promise.reject("error");
           throw "error"
        }).then((res) => {
            console.log(res+" 第二层代码");
            return (res + " 222");
        }).then((res) => {
            console.log(res+" 第三层代码");
            console.log(res+ " 333");
        }).catch(error=> {
            console.log(error)
        });
    </script>

 多个请求完成

    <script>
     // 请求全部返回后才输出结构
      Promise.all([
          new Promise((resolve)=>{
            setTimeout(() => {
                resolve("result1");
            }, 1000);
          }),
          new Promise((resolve)=>{
            setTimeout(() => {
                resolve("result2");
            }, 2000);
          })
          ]).then(results=>{
          console.log(results);
      }); 
    </script>

 

posted @ 2020-04-20 21:42  bradleydan  阅读(86)  评论(0)    收藏  举报