Promise解决回调地狱

最新推荐文章于 2023-07-19 16:38:52 发布

2301_76440312

最新推荐文章于 2023-07-19 16:38:52 发布

阅读量90

点赞数

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/2301_76440312/article/details/129664910

版权

文章介绍了Promise的基本语法和状态转换，包括从pending到fulfilled或rejected的状态变化。通过示例展示了如何使用Promise封装ajax请求，并利用async和await进行异步操作，使得代码更加简洁易读。在异步函数wojiaoyibufangfa中，通过try-catch结构处理可能的错误，显示了Promise和async/await结合的使用方式。

摘要由CSDN通过智能技术生成

Promise基本语法

<script>
    // Promise 构造函数
     var q = new Promise(function(resolve,reject){
        // 许诺 放入异步
        setTimeout(()=>{
            // 成功允诺承诺
            // resolve(["111","1222","333"])

            // 失败拒绝承诺
            reject("123123")
        },2000)
     })
     

    //  q 就是Promise对象

    q.then(function(res){
        // 兑现承诺，这个函数执行
        console.log("success",res)
    }).catch(function(err){
        // 拒绝承诺，这个函数执行
        console.log("fail",err)
    })
</script>

Promise只有3种状态（pending、成功fulfilled、失败erject）
Promise生成Promise对象时候处于（执行中 pending状态）``
如果2s后异步结束了，执行resolve方法就从pending状态到达fulfilled状态，
表示已兑现承诺，之后执行then中注册的回调函数，表示成功了。
反之异步结束调用reject方法，从pending到reject状态表示catch的回调函数会被执行。就是失败拒绝承诺。

async(异步)and await(等待)

//promise封装的 ajax
function pajax(options){		//options 为ajax的方法的形参
return  new Promise((resolve,reject) => { //（允许，拒绝执行）
    ajax({	
        ...options, //展开ajax
        success(res){ //允许
            resolve(res)
        },
        error(err){ //拒绝
            reject(err)
        }
    })
})
}

 export {ajax,pajax} //导出

在promise封装ajax中

<script type="module">
    import { pajax } from './util.js' //调用方法从这个地址。
    async function wojiaoyibufangfa() {  //异步方法名
  
        try{ //尝试
          //  await等待 同步代码/promise对象
                    var res = await pajax({ 
                    url: "http://localhost:3000/news",
                    data: {
                        author: "tiechui"
                    }
                })
                var res1 = await pajax({
                    url: "http://localhost:3000/comments",
                    data: {
                        newsId: res[0].id
                    }
                })
                console.log("success",{res,res1})
                // console.log("success",res1)
                
        }catch(err){
                console.log("err",err)
        }
        
    }
    wojiaoyibufangfa()
</script>

打印结果：请添加图片描述