Promise如何解决回调地狱

为什么要有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)
    })
复制代码

 

posted @   奔跑的太阳花  阅读(5220)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示