🤟🏼 冇事来学系--Vue2.0中Promise详讲(上)

1,248 阅读2分钟

「这是我参与11月更文挑战的第23天,活动详情查看:2021最后一次更文挑战」。

回调地狱

多层回调函数的相互嵌套,就形成了回调地狱

// 示例
setTimeout(()=>{		// 第一层
	console.log('延迟一秒后输出')
  
  setTimeout(()=>{		// 第二层
  	console.log('再延迟两秒后输出')
    
    setTimeout(()=>{		// 第三层
    	console.log('再延迟三秒后输出')
      
    },3000)
  },2000)
},1000)

回调地狱的缺点:

  1. 代码耦合性太强,牵一发而动全身,难以维护
  2. 大量冗余代码相互嵌套,可读性差

为了解决回调地狱的问题,ES6新增了Promise的概念,因为Promise支持链式调用



Promise基本概念

promise是JS中进行异步编程的新解决方案(旧方案是单纯使用回调函数)

从语法上来说Promise是一个构造函数;从功能上来说Promise对象用来封装一个异步操作,并可以获取其成功/失败的结果

补充:异步操作包括以下:node中的fs文件操作、数据库操作、Ajax请求、定时器等等

1. Promise是一个构造函数

    • 可以new一个Promise实例对象。Promise在实例化的时候需要接收一个函数参数 ,该函数有两个形参resolvereject,通过调用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👩🏻‍🚀来自一个互联网底层组装员,下一篇再见! 📖