1 为什么使用Promise
- Promise是异步编程的一种解决方案。
- 可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
- 可以在对象之间传递和操作promise,帮助我们处理队列
1.1 异步回调的问题
- 之前处理异步是通过纯粹的回调函数的形式进行处理;
- 很容易进入到回调地狱中,剥夺了函数return的能力;
- 问题可以解决,但是难以读懂,维护困难;
- 稍有不慎就会踏入回调地狱 - 嵌套层次深,不好维护;
1.2 什么时候会来处理异步事件呢?
- 一种很常见的场景应该就是网络请求了。
- 我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。
- 所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。
- 如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦。
1.3 网络请求的回调地狱
我们来考虑下面的场景(有夸张的成分):
我们需要通过一个url1从服务器加载一个数据data1,data1中包含了下一个请求的url2。
我们需要通过data1取出url2,从服务器加载数据data2,data2中包含了下一个请求的url3。
我们需要通过data2取出url3,从服务器加载数据data3,data3中包含了下一个请求的url4。
发送网络请求url4,获取最终的数据data4
-
上面的代码有什么问题吗?
- 正常情况下,不会有什么问题,可以正常运行并且获取我们想要的结果。
- 但是,这样额代码难看而且不容易维护。
- 我们更加期望的是一种更加优雅的方式来进行这种异步操作。
- 如何做呢?就是使用Promise。
Promise可以以一种非常优雅的方式来解决这个问题。
2 什么是Promise
promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外);并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据;
<script>
//promise
//创建promise对象的实例时,构造函数需要接收一个函数作为参数
//该函数需要接收两个函数作为参数
//resolve 函数
//reject 函数
/*promise状态:
pending 进行中
fullfilled 已成功 resolved 成功 执行 resolve函数
rejected 已失败 rejected 失败 执行 reject函数
*/
let p=new Promise(function(resolve,reject){
//异步请求
setTimeout(()=>{
console.log('run');
// resolve();//成功了
reject();
},100);
});
// console.log(p);
//then方法的第一个参数,是resolve函数的实现
//then方法的第二个参数是reject函数的实现
p.then(()=>{
console.log('sucess');
},()=>{
console.log('error');
});
</script>
-
介绍
-
resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
-
reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
-
promise有三个状态:
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;
promise状态一经改变,不会再变。 -
Promise对象的状态改变,只有两种可能:
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生,状态就凝固了,不会再变了。
2.1 假如在.then()的函数里面不返回新的promise,会怎样?
.then()
- 接收两个函数作为参数,分别代表fulfilled(成功)和rejected(失败)
- .then()返回一个新的Promise实例,所以它可以链式调用
- 当前面的Promise状态改变时,.then()根据其最终状态,选择特定的状态响应函数执行
- 状态响应函数可以返回新的promise,或其他值,不返回值也可以我们可以认为它返回了一个null;
- 如果返回新的promise,那么下一级.then()会在新的promise状态改变之后执行
- 如果返回其他任何值,则会立即执行下一级.then()
.then()里面有.then()的情况
- 因为.then()返回的还是Promise实例
- 会等里面的then()执行完,再执行外面的
2.2 Promise错误处理
Promise会自动捕获内部异常,并交给rejected响应函数处理。
1 第一种错误处理
<script>
new Promise((resolve) => {
setTimeout(() => {
throw new Error('bye')
}, 2000)
}).then((val) => {
console.log(val)
})
.catch(error => {
console.log('Error', error)
})
</script>
2 第二种错误处理
<script>
new Promise((resolve, reject) => {
setTimeout(()=>{
reject('error')
},1000)
}).then(data=>{
console.log(data)
},err=>{
console.log(err)
})
</script>