目录
Promise
Promise是一个创建promise对象的构造函数,只能通过new关键字调用,不能直接调用,否则会报错,如下
三种状态
promise存在三种状态:
pending
(进行中)fulfilled
(已成功)rejected
(已失败)
一旦状态改变,就不会再变!
- 当promise处于pending状态时,状态可以改变为fulfilled或rejected。
- 当pending->fulfilled或rejected状态就凝固了,不会再变了
console.log(new Promise((resolve, reject)=>{ resolve(111) reject(222) })) // Promise {< fulfilled >: 111}
语法
new Promise(executor)
executor:在构造函数中执行的 function。它接收两个函数作为参数:resolveFunc 和 rejectFunc。
executor 中抛出的任何错误都会导致 Promise 被拒绝,并且返回值将被忽略
执行过程
-
[1] 在通过new关键字实例化promise对象时,必须传入一个函数。
函数在被执行时还会生成一对相应的 resolveFunc 和 rejectFunc 函数传入该函数中
new Promise((resolve, reject)=>{})
Promise一旦被创建就会立即执行并且无法中途取消,此时promise的状态为pending
executor 函数中的 return 语句仅影响控制流程,调整函数某个部分是否执行,但不会影响 Promise 的履行值
const res = new Promise((resolve, reject)=>{ return console.log(1111) // 不会执行 }) console.log(res) // Promise {<pending>}
如上示例中,return会终止executor函数的执行,但是不会改变Promise的状态。
当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
-
[2] 状态改变
Promise对象的状态不受外界影响,只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态
new Promise((resolve, reject)=>{ // [1] 情况1 执行resolve函数时 Promise状态由pending转变为fulfilled // [2] 情况2 执行reject函数时,Promise状态由pending转变为rejected // [3] 状态3 抛出错误,Promise状态由pending转变为rejected(返回值被忽略) })
resolve、reject并不会终止 executor 函数后续执行
js代码模拟
class Promise{
constructor(executor){
this.value = undefined
this.reason = undefined
this.status = 'pending'
const resoveFun = value => {
if (this.status == 'pending') {
this.value = value
this.status = 'fulfilled'
}
}
const rejectFun = reason =>{
if (this.status == 'pending') {
this.reason = reason
this.status = 'rejected'
}
}
try{
executor(resoveFun, rejectFun)
}catch(err){
rejectFun(err)
}
}
}
const res1 = new Promise((resove, reject)=>{})
console.log(res1) // {status: pending}
const res2 = new Promise((resove, reject)=>{ resove(111)})
console.log(res2) // {status: 'fulfilled', value: 111}
const res3 = new Promise((resove, reject)=>{ reject(222)})
console.log(res3) // {status: 'rejected', reason: 222}
const res4 = new Promise((resove, reject)=>{ resove(111) ; reject(222)})
console.log(res4) // {status: 'fulfilled', value: 111}
后续过程-链式调用
then方法
then方法是定义在原型对象Promise.prototype上的,作用是为 Promise 实例添加状态改变时的回调函数。
语法
Promise.then(onFulfilled, onRejected)
then函数接收两个函数作为参数,分别是onFulfilled,onRejected
- 当promise 状态为 fulfilled 时,调用 onFulfilled 函数
- 当 promise 状态为 rejeted 时, 调用onRejected函数
举例说明
const p1 = new Promise((resolve, reject)=>{
})
p1.then(res=>{
console.log(res)
}, err=>{
console.log(err)
})
此时控制台没有任何值打印出来
const p1 = new Promise((resolve, reject)=>{
resolve(111)
})
p1.then(res=>{
console.log(res)
}, err=>{
console.log(err)
})
此时在控制台打印111
const p1 = new Promise((resolve, reject)=>{
reject(222)
})
p1.then(res=>{
console.log(res)
}, err=>{
console.log(err)
})
此时打印222
注意点-then方法执行时机
在执行过程中如果Promise状态变为resolved,则会在当前脚本所有同步任务执行完毕时
会调用then方法指定的回调函数(并不是状态改变后立即调用)。
new Promise(function (resolve, reject) {
console.log(111)
resolve(222)
console.log(333)
}).then(data => {
console.log(data)
})
console.log(444)
执行结果为111、333、444、222
执行111结束就resolve了,但是并没有马上执行then方法而是等待所有的同步函数执行结束才去执行then函数。
注意点- then方法的执行顺序
同一个 promise 可以注册多个 then 方法,当 promise 完成或者失败后,对应的 then 方法按照注册顺序依次执行
。
const res = new Promise((resolve, reject)=>{
resolve(111)
})
res.then(res=>{
console.log('111', res)
})
res.then(res=>{
console.log('222', res)
})
执行结果
注意点-then方法的返回值
then函数的返回值为一个新的
Promise
const p1 = new Promise(function (resolve, reject) {
resolve(1)
})
console.log(p1.then(data => {})) // Promise (<pending>)
通过上述代码可以看到then函数的返回值为一个新的Promise,这样我们可以使用then方法进行链式调用
const res = new Promise((resolve, reject)=>{
resolve(111)
})
res.then(res=>{
console.log('111', res) // ‘111’ 111
return 222
}).then(res=>{
console.log('第二个res', res) // '第二个res' 222
})
js代码模拟
class Promise{
constructor(executor){
this.value = undefined
this.reason = undefined
this.status = 'pending'
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resoveFun = value => {
if (this.status == 'pending') {
this.value = value
this.status = 'fulfilled'
this.onFulfilledCallbacks.forEach((cb) => cb(this.value));
}
}
const rejectFun = reason =>{
if (this.status == 'pending') {
this.reason = reason
this.status = 'rejected'
this.onRejectedCallbacks.forEach((cb) => cb(this.value));
}
}
try{
executor(resoveFun, rejectFun)
}catch(err){
rejectFun(err)
}
}
then(onFulfilled, onRejected){
if (this.status == 'fulfilled') {
onFulfilled(this.value)
}
if (this.status == 'rejected') {
onRejected(this.reason)
}
if (this.status == 'pending') {
this.onFulfilledCallbacks.push(onFulfilled);
this.onRejectedCallbacks.push(onRejected);
}
}
}
此处js代码模拟的Promise与Promise的区别是
- [1] 真正的promise的then方法为
微任务
,此处无法模拟,因此在resolve/reject后会同步执行then方法而非异步
结果为1、3、2、2、4const res = new Promise((resolve,reject)=>{ console.log(111) resolve(222) console.log(333) }) res.then(data=>{ console.log('第一次:', data) }) res.then(data=>{ console.log('第二次', data) }) console.log(444)
如果是真正的Promise实例化对象的话结果为1、3、4、2、2 - [2] then的返回值不是Promise对象
const res = new Promise((resolve,reject)=>{ resolve(2) }) console.log(res.then(data=>{})) // undefined
catch方法
catch方法是定义在原型对象Promise.prototype上的,用于指定发生错误时的回调函数。
1.在执行过程中如果Promise状态变为rejected,就会调用catch方法指定的回调函数.
new Promise(function (resolve, reject) {
throw new Error('test')
})
.then(data => {
console.log('data', data)
})
.catch(err => {
console.log('err', err) // err Error: test
})
2.then方法里面如果出现异常也会走catch函数,类似与try/catch
new Promise(function (resolve, reject) {
resolve(111)
})
.then(data => {
throw new Error('test')
})
.catch(err => {
console.log('err', err) // err Error: test
})
3.promise抛出的异常总会被后面的catch函数捕获,因此当使用链式调用时,最后跟随的catch方法可以捕捉前面任意then函数中的异常
finally方法
finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作,当不论是成功还是失败都会执行的代码就可以走这个函数。
不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数
finally方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled还是rejected。这表明,finally方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果
举例说明-链式调用
需求:现在有两个请求,请求2需要请求1的请求结果作为参数,因此请求2需要等待请求1请求完毕之后再发送请求。
- 因为Promise传入的函数是创建后立即执行,因此将不立即执行的封装在函数中,等待执行时机调用。
当使用链式调用时,最后跟随的catch方法可以捕捉前面任意then函数中的异常
const p1 = new Promise(function (resolve, reject) {
// 模拟异步请求1-立即发送
setTimeout(function () {
resolve(222)
}, 0)
})
function toP2 (value) {
const p2 = new Promise(function (resolve, reject) {
// 模拟异步请求2-封装在函数内部,等待请求1返回结果再发送
setTimeout(function () {
resolve(value)
}, 0)
})
return p2
}
p1.then(data1 => {
console.log('请求1获取的数据', data1) // 222
return toP2(data1)
}).then(data2 => {
console.log('请求2获取的数据', data2) // 222
}).catch(err=>{
// 可以捕获前面所有then函数的异常
})
后续过程-同时调用
all方法
有时我们代码中存在多个异步请求,希望等待多个异步请求的结果才能进行下一步操作,就可以使用all方法。
语法
Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
上面代码中,Promise.all方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例
结果
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
案例-成功
function f1 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('我是请求1的返回结果')
}, 0)
})
}
function f2 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('我是请求2的返回结果')
}, 500)
})
}
Promise.all([f1(), f2()]).then(data => {
console.log('data', data) // ["我是请求1的返回结果", "我是请求2的返回结果"]
})
- 只有等待两个Promise都执行完毕才会走then方法,then回到函数里面的结果为1个数组,里面是按照顺序的返回结果。
案例-失败
function f1 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('我是请求1的返回结果')
}, 0)
})
}
function f2 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
throw new Error('失败')
}, 500)
})
}
Promise.all([f1(), f2()])
.then(data => {
console.log('data', data)
})
.catch(err => {
console.log('err', err) // err
})
- 只要>=1个失败就会走catch方法
race方法
有时我们代码中存在多个异步请求,希望等待多个异步请求中只要有1个请求的结果就能进行下一步操作,就可以使用race方法
Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.race([p1, p2, p3]);
上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
Promise.race()方法的参数与Promise.all()方法一样,如果不是 Promise 实例,就会先调用下面讲到的Promise.resolve()方法,将参数转为 Promise 实例,再进一步处理。
举例
function f1 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('我是请求1的返回结果')
}, 0)
})
}
function f2 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('我是请求2的返回结果')
}, 500)
})
}
Promise.race([f1(), f2()])
.then(data => {
console.log('data', data) // data 我是请求1的返回结果
})
.catch(err => {
console.log('err', err)
})
原理-源码解析
思考题
第一题:说出下列代码的输出结果
-
[1]
console.log(new Promise())
结果:error:Promise resolver undefined is not a function
解析:Promise构造函数必须接受一个函数为参数,否则会报错
-
[2]
console.log(new Promise(()=>{ return })) //
结果:Promise {< pending >}
解析:Promise的函数会立即执行,此时promise的状态为pending,状态不受外界影响->只有异步操作的结果,可以决定当前是哪一种状态
-
[3]
console.log(new Promise((resolve, reject)=>{ resolve(111) reject(222) }))
结果: Promise {< fulfilled >: 111}
解析: 当pending->fulfilled或rejected状态就凝固了,不会再变了
第二题:说出数字的输出顺序
console.log(1) // 执行 打印1
setTimeout(function () {
console.log(2)
}, 0) // 放入异步队列中
new Promise(resolve => {
// Promise在新建后就会立即执行(执行传入的函数)
console.log(3)
resolve()
console.log(4)
}).then(() => {
// 同步执行完毕后执行
console.log(5)
})
// 同步代码-顺序执行
console.log(6)
- Promise在
新建后就会立即执行
(执行传入的函数),then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行
- 注意,调用resolve或reject并不会终结 Promise 的参数函数的执行
- 定时器后面跟随的时间是等同步代码执行完毕后的等待时间。
- 因此执行结果为1,3,4,6,5,2