学习尚硅谷-------Promise笔记

关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async await带我们走向光明。

es5中的回调函数指的是一个函数作为参数传递到另一个函数中,这个作为参数的函数就是回调函数。

Promises对象是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。

简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:

f1().then(f2);

异步编程

fs 文件操作

require ('fs').readFile('./index.html', (err,data) => {
   })

Ajax

$.get('/server', (data) => {
   })

定时器

setTimeout(() => {
   }, 2000)

以上内容使用的是纯回调函数来进行异步操作

Promise是es6引入异步编程的新的解决方案

语法上:一个构造函数。可以实例化对象,封装异步操作,获取成功和失败的结果

为什么要使用Promise?

1)指定回调函数的方式更加灵活

​ 旧的:必须在启动异步任务前指定

​ promise:启动异步任务 =》返回promise对象 =》给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

2)支持链式调用,可以解决回调地狱问题

asyncFunc1(opt, (...args1) => {
   
	asyncFunc2(opt, (...args2) => {
   
		asyncFunc3(opt, (...args3) => {
   
			asyncFunc4(opt, (...args4) => {
   
				//some operation
			})
		})
	})
})

回调地狱:回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件

回调地狱的缺点:不便于阅读,不便于异常处理

案例需求1:点击抽奖按钮,等2秒钟,告知是否中奖,中奖概率定位30%,中奖显示弹框,“恭喜您中奖了”,未中奖,弹出框“再接再厉”

案例需求2:promise实现Ajax请求

案例需求3:promise封装Ajax请求

promise 状态

实例对象中的一个属性 【PromiseState】属性是内置的,我们不能直接对其进行操作

*pending 未决定的

*resolved / fulfilled 成功

*rejected 失败

promise的状态改变

1.pending ===> resolved

2.pending ===>rejected

说明:只有这2种,且一个Promise对象只能改变一次

​ 无论变为成功还是失败,都会有一个结果数据

​ 成功的结果数据一般称为value,失败的结果数据一般称为reason

promise 对象的值

示例对象中的另一个属性 【PromiseResult】

保存着异步任务 [成功 / 失败] 的结果

resolve 和 reject 函数可以对此属性进行修改

promise 的基本流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaAbrfsr-1607945193404)(C:\Users\sundan\AppData\Roaming\Typora\typora-user-images\image-20201205190541879.png)]

如何使用promise

1.Promise的构造函数:Promise(executor){}

​ (1)executor函数:执行器 (resolve, reject) => {} //可以使用箭头函数或匿名函数

​ (2)resolve函数:内部定义成功时我们调用的函数 value => {}

​ (3)reject函数:内部定义失败时我们调用的函数 reason => {}

说明:执行器函数会在promise内部立即同步调用,异步操作在执行器中执行

let p = new Promise((resovle, reject) => {
   
    console.log(11111)
})
console.log(22222)

2.Promise.prototype.then方法:(onResolved, onRejected) => {} //用来指定回调

(1)onResolved函数:成功的回调函数 (value) => {}

(2)onRejected函数: 失败的回调函数 (reason) => {}

说明:指定用于得到的成功value的成功回调和用于得到失败reason的失败回调

​ 返回一个新的Promise对象

3.Promise.prototype.catch方法:(onRejected) => {}

(1)onRejected函数:失败的回调函数 (reason) => {}

let p = new Promise((resovle, reject) => {
   
    //修改 promise的状态
    reject('error')
})
p.catch(reason => {
   
    console.log(reason)
})

4.Promise.prototype.finally方法:() => {}

finally()方法的回调函数不接受任何参数,不管promise最后的状态,在执行完then或catch指定的回调函数后,都会执行finally方法指定的回调函数

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值