ES6基础----Promise的使用

admin2024-09-05  9

目录

Promise 是 ES6 提出的解决异步编程的一种方法,主要是为了解决回调地狱的问题

1、异步编程的执行方式

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

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

        (1)resovle 代表成功的返回

        (2)reject 代表失败的返回

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

        (4)Promise 有三个状态 

  4、使用 Promise 解决回调地狱


Promise 是 ES6 提出的解决异步编程的一种方法,主要是为了解决回调地狱的问题

1、异步编程的执行方式

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 有三个状态 

       //                        成功    失败

         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)

        })
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!