一,理解
抽象表达:promise是js中进行异步编程的新的解决方案。(旧的是纯粹的回调函数)
具体表达:从语法上来看,promise是一个构造函数。从功能上来说,promise对象用来封装一个异步操作,并可以获取其结果。
异步操作的第一阶段处理方式:回调函数作为参数传入,异步结果作为回调函数的参数传入,回调函数在异步操作后调用,以完成对异步结果的获取和处理。
之前就学习过,异步操作的执行,是无法直接得到执行结果的。
为了拿到结果,人们将函数作为参数来定义异步操作的函数:
类似于上图这样,利用回调函数作为异步操作的参数传入,在异步操作的函数内部调用回调函数,从而取得异步结果(作为回调函数的参数),并做相应的处理。
也就是说,对异步操作的结果处理放在回调函数中了。
但是,若是出现多层回调函数嵌套的情况,就会产生回调地狱。为了解决回调地狱的问题,人们引入了promise。
所以说它是js中进行异步编程的新的解决方案。
异步操作的第二阶段处理方式:promise
回调地狱的产生,原因还是回调函数对结果的处理和异步操作终究还是在一起,并没有把分离。而引入promise的最大作用,就是把异步操作的过程和结果做到了分离,可以用promise.then()来获取和处理异步操作的结果。
异步操作的第三阶段处理方式:异步函数
promise还是有些繁琐,于是es7又推出了async和await,将同步操作以同步的方式书写出来。
二,promise的状态改变
Promise对象只有三种状态。
异步操作“未完成”(pending)
异步操作“已完成”(resolved,又称fulfilled)
异步操作“失败”(rejected)
这三种的状态的变化途径只有两种且不可逆,且一个promise只能改变以此一次状态。
异步操作从“未完成”到“已完成”
异步操作从“未完成”到“失败”。
因此,Promise对象的最终结果只有两种。要么成功,要么失败。于是只会有一种数据产生,成功的结果数据称value,失败的结果数据称reason
异步操作成功,Promise对象传回一个值,状态变为 resolved。
异步操作失败,Promise对象抛出一个错误,状态变为 rejected。
三,promise的基本运行流程
四,promise的基本使用
const p= new Promise((resolve,reject)=>{
//这个回调函数,又被称之为执行器函数,异步操作放在这里面执行,参数是两个函数(内部定义好了的)
//执行异步操作
setTimeout(()=>{
const time=Date.now() //如果当前时间是偶数就代表成功
//如果成功了,就执行resolve(value),value时成功数据,作为resolve函数的参数
if(time % 2 ==0){
resolve('成功啦')
}else{
//如果异步操作失败了,调用reject(reason),reason是作为它的参数
reject('失败惹')
}
},1000)
})
//对异步操作结果的处理
p.then(
value=>{
//接收到成功的value数据 onResolved
console.log('成功的话就会执行这里的函数---',value)
},
reason=>{
//接收到失败的reason数据 onRejected
console.log('失败的话就会执行这里的函数---',reason)
}
)
五,为什么要使用promise
1,指定回调函数的方式更加灵活
旧的纯粹回调函数的形式,必须在启动异步任务前,就指定好回调函数(作为异步操作函数的形参)。而promise,则是启动异步任务,返回promise对象,然后再给promise对象绑定回调函数(甚至可以在异步任务完成后绑定)
例如:使用纯粹的回调函数:
//成功的回调函数
function successCallback(result){
//对result的一系列操作,例如下面这行打印结果
console.log(result)
}
//失败的回调函数
function failureCallback(error){
//对error的一系列操作
console.log(error)
}
//定义异步操作的函数
function createAudioFileAsync(audioSettings,successFun,errorFun){
//针对audioSettings中的一些参数,进行异步操作
//……一系列的异步操作代码,得成功的话,得到result,失败的话得到error
if(成功){
// 执行成功的操作,并将结果传入作为参数
successFun(result)
}else(失败){
// 执行失败后的操作,并将结果传入作为参数
errorFun(error)
}
}
//1.使用纯粹的回调函数
//使用并进行异步操作,直接指定回调函数,作为异步操作函数的实参传入,使得异步操作的结果也在这个异步操作的函数中处理
createAudioFileAsync(audioSettings,successCallback,failureCallback)
// 2. 使用promise
//直接开始异步操作,只是没有在第一时间完成
const promise = createAudioFileAsync(audioSettings)
//在后面指定的回调函数,异步操作和异步操作的结果做到了分离。
promise.then(successCallback,failureCallback)
2,支持链式调用,可以解决回调地狱问题
什么是回调地狱?回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调函数执行的条件。
回调地狱的缺点?不便于阅读、不便于异步处理
解决方案?promise链式调用
终极解决方案?async/await
// 1. 回调地狱
doSomething(function(result){
doSomethingElse(result, function(newResult){
doThirdThing(newResult, function(finalResult){
console.log('Got the final result:' + finalResult)
}, failureCallback)
}, failureCallback)
}, failureCallback)
// 2. 使用promise的链式调用解决回调地狱
doSomething().then(function(result){
return doSomethingElse(result)
})
.then(function(newResult) {
return doThirdThing(newResult)
})
.then(function(finalResult){
console.log('Got the final result:'+finalResult)
})
.catch(failureCallback)
// 3. async/await:回调地狱的终极解决方案
async function request() {
try {
const result=await doSomething()
const newResult=await doSomethingElse(result)
const finalResult=await soThirdThing(newResult)
console.log('Got the final result'+finalResult)
} catch(error) {
failureCallback(error)
}
}
六,promise的API使用
1、Promise构造函数:Promise(excutor){}
excutor函数:同步执行 (resolve, reject)=>{}
resolve函数:内部定义成功时我们调用的函数 value=>{}
reject函数:内部定义失败时我们调用的函数 reason=>{}
说明:excutor会在Promise内部立即同步回调,异步操作在执行器中执行
2、Promise.prototype.then方法:(onResolved, onRejected)=>{}
onResolved函数:成功的回调函数 (value)=>{}
onRejected函数:失败的回调函数 (reason)=>{}
说明:指定用于得到成功value的成功回调和用于得到失败reason的失败回调,返回一个新的promise对象
3、Promise.prototype.catch方法:(onRejected)=>{}
onRejected函数:失败的回调函数 (reason)=>{}
说明:then()的语法糖,相当于:then(undefined, onRejected)
new Promise((resolve, reject)=>{
//一系列异步操作,得到结果result,成功则调用resolve,失败则调用reject
resolve(result)
// reject(result)
}).then( //对成功的结果的处理,参数是一个函数,此函数的参数value就是result,
value=>{
//函数的内容里面写对异步结果的处理
console.log('onResolved()', value)
}
).catch( //对失败的结果的处理,参数是一个函数,此函数的参数reason就是result,
reason=>{
console.log('onRejected()', reason)
}
)
4、Promise.resolve方法:(value)=>{}
value: 成功的数据或promise对象
说明:返回一个成功/失败的promise对象
5、Promise.reject方法:(reason)=>{}
reason:失败的原因
说明:返回一个失败的promise对象
// 产生一个成功值为1的promise对象
const p1=new Promise((resolve, reject)=>{
resolve(1)
})
// 产生一个成功值为2的promise对象
const p2=Promise.resolve(2) // 语法糖
const p3=Promise.reject(3)
p1.then(value=>{
console.log(value)}) //1
p2.then(value=>{
console.log(value)}) //2
p3.catch(reason=>{
console.log(reason)}) //3
6、Promise.all方法:(promises)=>{}
promises:包含n个promise的数组
说明:返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败
// 产生一个成功值为1的promise对象
const p1=new Promise((resolve, reject)=>{
resolve(1)
})
// 产生一个成功值为2的promise对象
const p2=Promise.resolve(2) // 语法糖
const p3=Promise.reject(3)
// 一个失败的话返回失败的数据,成功的话返回成功的数组
const pAll = Promise.all([p1,p2,p3])
pAll.then(
values=>{
//此时的valuse是一个数组,每一项对应是每个promise的结果【1,2,3】
},
reason=>{
console.log('all onRejected()', reason) // 3
}
)
7、Promise.race方法:(promises)=>{}
promises: 包含n个promise数组
说明:返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态
const pRace = Promise.race([p1,p2,p3]) //不知道谁先完成,一旦有人成功,则取它,其他人不要了
pRace.then(
value=>{
console.log('race onResolved()', value)
},
reason=>{
console.log('race onRejected()', reason)
}
)
七,promise的几个关键问题
1,如何改变promise 的状态
resolve:如果当前是pendding就会变为resolved
reject:如果当前是pendding就会变为rejected
抛出异常:如果当前是pendding就会变为rejected
const p= new Promise((resolve,reject)=>{
//resolve(1) promise变为resolved成功状态
//reject(2) promise变为rejected失败状态
//throw new Error('出错了') 抛出异常,promise变为rejected失败异常,reason为抛出的异常
throw 3 //抛出异常,promise变为rejected失败状态,reason为抛出的3
})
p.then(
value=>{
}
reason =>{
console.log(reason)}
)
p.then(
value=>{
}
reason =>{
console.log('第二次'+reason)}
)
//两次都可以执行,也就是说,可以对异步操作的结果做不同的处理
2,改变promise状态和指定回调函数谁先谁后?
先指定回调函数,然后才改变状态:
先改变状态,后指定回调函数:
或者,直接比异步操作结束时间还晚,来指定回调函数:
3,promise的回调函数,都是异步执行的
看这段代码,resolve(1)是同步执行的,.then()也是同步执行的,这时候,状态已经改变,回调函数也指定好了,那么它是同步执行的吗?不,它是异步执行的,可以由------先输出从而判断出来。
4,promise.then()返回的新promise的结果状态是由什么决定的?
(1),简单表达:由then()指定的回掉函数的执行结果决定
(2),详细表达:
1,如果抛出异常,新promise变为rejected状态,reason为抛出的异常
2,如果返回的是非promise的任意值,新promise变为resolved,value为返回的值。
3,如果返回的是另一个新的promise,此promise的结果就会变成新promise的结果
new Promise((resolve,reject)=>{
resolve(1)
}).then(
value=>{
console.log('onResolved1()',value)
//return 2
//return Promise.resolve(3)
//return Promise.reject(4)
throw 5
},
reason=>{
console.log('onRejected1()',reason)
}
).then(
value=>{
console.log('onResolved2()',value)
},
reason=>{
console.log('onRejected2()',reason)
}
)
//r啥也不return时,返回结果是:onResolved1() 1 onResolved2() underfined ,因为没有指定value的值
//return 2时,即为返回非promise的任意值,新promise变为resolved,value为返回的值2。于是结果onResolved1() 1 onResolved2() 2
//return Promise.resolve(3)时,返回的是另一个新的promise,此promise的结果就会变成新promise的结果3
//于是返回的结果是:onResolved1() 1 onResolved2() 3
//return Promise.reject(4)和上一个一样,返回的最终结果:onResolved1() 1 onRejected2() 4
//throw 5,如果抛出异常,新promise变为rejected状态,reason为抛出的异常
//最终的结果:onResolved1() 1 onRejected2() 5
由此可以知道,链式写promise中,第一个异步操作的promise失败 了并不会导致后续的promise失败,后续的promise的失败与否还是由新promise决定的。
5,promise的异常传透
1,当使用promises的then链式调用时,可以在最后指定失败的回调。
2,前面的任何操作出了异常,都会传递到最后的失败中处理
6,中断promise链
1,当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数。
2,办法:在回调函数中返回一个pendding状态的promise对象
原理就是返回的新promise没有结果,所以就不会继续调用reject或者resolve,所以就中断了这个链……