Promise如何解决回调地狱

最新推荐文章于 2025-05-28 23:08:58 发布

转载最新推荐文章于 2025-05-28 23:08:58 发布 · 666 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lguow/p/11315374.html

文章标签：

#数据库

本文深入探讨了使用Promise解决异步编程中的回调地狱问题，通过实例展示了Promise的基本用法及链式调用，有效提升了代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要有promise：解决（回调地狱）的问题

### 回调地狱：

```js //跟以前的if条件地狱很像

// if(){ // if(){ // if(){ // } // } //}

$.get("/getUser",function(res){

　　$.get("/getUserDetail",function(){

　　　　 $.get("/getCart",function(){

　　　　　　 $.get("/getBooks",function(){ //...

　　　　　　 })

//node开发：读取文件；开个服务器、接收一个请求、请求路径、访问数据库 ```

### Promise函数基本用法
```js
var promise=new Promise((resolve,reject)=>{
　　//b 把需要执行的异步操作放在这里
　　$.get("/getUser",res=>{
　　　　//获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
　　　　//c、

　　　　resolve(res) //只是一个标记
　　　　//而执行的下一步操作，其实就是写在then的回调函数中的
　　})
})

//a、
promise.then(res=>{
　　//d、执行后续的操作
　　console.log(res);
})
```

    //把异步操作封装在一个promise对象中
    function fn(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                console.log('你好');

                //其实异步逻辑到这里其实已经执行完毕了，
                //就可以告诉外界，可以执行其他操作了
                //如何告诉外界，让外界得知？
                resolve();
            },1000);
        })
    }
    //调用了这个函数，执行了异步操作
    //fn()
    //存在问题，并不知道这个异步操作什么时候结束
    fn().then(res=>{
        //执行到下一步
        console.log("下一步");

        fn().then(res=>{
            console.log("执行第二步");
        })
    })

    //输出顺序：
    //你好
    //下一步
    //你好
    //执行第二步

 function f1(){
        return new Promise(resolve=>{
            setTimeout(()=>{
                console.log('第一步');
                
                //异步逻辑已经执行完，必须要告诉外界我执行完了
                resolve();

            },1000)
        })
    }
    function f2(){
        return new Promise(resolve=>{
            setTimeout(()=>{
                console.log('第二步');
                
                //告诉外界我执行完了
                resolve();
            },1000)
        })
    }

    f1().then(res=>{
        //返回一个promise对象,然后链式调用then方法
        return f2();
    }).then(res=>{
        return f1();
    }).then(res=>{
        return f2();
    }).then(res=>{
        setTimeout(()=>{
            console.log('完成');
        },1000)
    })