「这是我参与11月更文挑战的第23天,活动详情查看:2021最后一次更文挑战」。
回调地狱
多层回调函数的相互嵌套,就形成了回调地狱
// 示例
setTimeout(()=>{ // 第一层
console.log('延迟一秒后输出')
setTimeout(()=>{ // 第二层
console.log('再延迟两秒后输出')
setTimeout(()=>{ // 第三层
console.log('再延迟三秒后输出')
},3000)
},2000)
},1000)
回调地狱的缺点:
- 代码耦合性太强,牵一发而动全身,难以维护
- 大量冗余代码相互嵌套,可读性差
为了解决回调地狱的问题,ES6新增了Promise的概念,因为Promise支持链式调用
Promise基本概念
promise是JS中进行异步编程的新解决方案(旧方案是单纯使用回调函数)
从语法上来说Promise是一个构造函数;从功能上来说Promise对象用来封装一个异步操作,并可以获取其成功/失败的结果
补充:异步操作包括以下:node中的fs文件操作、数据库操作、Ajax请求、定时器等等
1. Promise是一个构造函数
-
- 可以new一个Promise实例对象。Promise在实例化的时候需要接收一个函数参数 ,该函数有两个形参resolve和reject,通过调用resolve和reject可以改变Promise对象的状态 (初始化、成功、失败三种状态)
// resolve解决 函数类型的数据,异步任务成功的时候调用resolve
// reject拒绝 函数类型的数据,异步任务失败的时候调用reject
const p = new Promise((resolve, reject)=>{
})
-
- new出来的Promise实例对象,代表一个异步操作
2. Promise的原型对象Promise.prototype上包含一个.then( )方法
每一次new Promise( )得到的实例对象,都可以通过原型链访问到.then( )方法,如p.then( )
3. .then( )方法用来预先指定成功和失败的回调函数
-
- p.then(成功的回调函数, 失败的回调函数)
- p.then(result=>{ }, reason={ })
-
- 调用.then( )方法时,成功时的回调函数是必选的,失败的回调函数是可选的
- 当promise对象是成功状态(异步代码调用了resolve函数),.then方法就会执行成功的回调函数
-
例子:抽奖案例
使用Promise对上述的功能进行封装。
.then方法传入两个参数,均为函数,一个是操作成功的时候调用,另一个是操作失败时调用
只有在Promise中的resolve和reject中传入了形参,才可以在.then中这两个函数使用形参接收传递的值
跋尾
本篇内容就到这里了~ 我是Zeus👩🏻🚀来自一个互联网底层组装员,下一篇再见! 📖