ES6基础----Promise的使用

最新推荐文章于 2024-10-04 00:46:18 发布

Pluto & Ethereal

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量634

点赞数 16

文章标签：前端 es6 开发语言

本文链接：https://blog.csdn.net/weixin_69190490/article/details/141668176

版权

console.log("同步任务1");

        setTimeout(() =>{  

             console.log("异步任务1")   //到达等待时间之后才执行，同时在等待的时候也执行下面的

         },3000)

        console.log("同步任务2")

        setTimeout(() =>{

            console.log("异步任务2")

        },2000)

         console.log("同步任务3")

         setTimeout(() =>{

          console.log("异步任务3")

        },1000)

2、回调地狱：需求：先执行完--异步任务1 之后再去执行--异步任务2 最后执行--异步任务3

//回调地狱，不断的异步任务嵌套     ---不断的嵌套会造成代码可靠性降低    

        setTimeout(() =>{

            console.log("异步任务1")

             setTimeout(() =>{

                console.log("异步任务2")

               setTimeout(() =>{

                    console.log("异步任务3")

                 },3000)

             },2000)

         },1000)

3、Promise 是构造函数，可以直接 new ,后面有两个形参

（1）resovle 代表成功的返回

（2）reject 代表失败的返回

（3）Promise 后面是跟的回调函数，回调函数可以使用普通函数 ,也可以使用箭头函数

（4）Promise 有三个状态

pending--运行中 fulfilled--成功 rejected--失败

Resolver 将 pending 状态变为 fulfilled 状态

reject 将 pending 状态变为 fuldilled 状态

       //                        成功    失败

         let pro=new Promise((resovle,reject) =>{

        resovle("成功了");

    reject("失败了");  //---必须注释一个，不注释只执行第一个

      });


        // .then() 方法接收 promise 成功和失败的值

        //后面跟两个回调函数

        //第一个回调函数处理成功的逻辑

        //第二个回调函数处理失败的逻辑

        //.then() 可以多个用，用 return返回决定下一个 的成功，return成功即执行成功，否则执行不成功的

       console.log(pro);  //Promise {<fulfilled>: '成功了'}

             //第一个--成功

      pro.then((res) =>{

             console.log(res);

           //第二个--失败

         },(error)=>{

            console.log(error);

         });

        .then() 接收成功的内容

        .catch() 接收所有失败的内容

        .finally() 不管 promise 是成功还是失败都会执行 .finally() 里面的内容

        pro.then((res) => {

           console.log("这是成功的值:"+res); //成功执行

         }).catch((error) => {

            console.log("这是失败的值:"+error);//失败执行

         }).finally(()=> {

         console.log("这是不管成功还是失败的值:123")//都会执行

        })

4、使用 Promise 解决回调地狱

 let promise = new Promise((resovle, reject) => {

            setTimeout(() => {

                resovle("异步任务1")

            }, 1000);

        })

        promise.then((res) => {

            console.log(res); //异步任务2

            return new Promise((resovle, reject) => {

                setTimeout(() => {

                    resovle("异步任务2")

                }, 1000);

            })

        })

            .then((res) => {

                console.log(res); //异步任务2

            })

//优化代码

 //把公共部分提出来封装为单独的函数，实现代码复用

 //数据通过传参的方式传入

        function test(text, time) {

            return new Promise((resovle, reject) => {

    //如果有值成功，否则失败

                if (text) {

                    setTimeout(() => {

                        resovle(text)

                    }, time)

                } else {

                    reject("没有传入值")

                }

            })

        }

 //先执行异步任务1再执行异步任务2

        test("异步任务1", 1000).then((res) => {//接收异步任务1成功，进行处理

            console.log(res)

            return test("异步任务2", 2000)//进行异步任务2的执行

        }).then((res) => {//接收异步任务2成功，进行处理

            console.log(res)

        }).catch((error) => {//接收失败，进行处理

            console.log(error)

        })