1.Promise
ES6开始支持,Promise对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简单说就是处理异步请求的。之所以叫Promise,就是我承诺,如果成功则怎么处理,失败怎么处理。
// 语法
new Promise(
/*下面定义的函数是executor*/
function(resolve, reject) {...}
)
1.1 executor
- executor是一个带有resolve和reject参数的函数
- executor函数在 Promise构造函数执行时立即执行,被传递resolve和reject函数(executor函数在Promise构造函数返回新建的对象前被调用)
- executor内部通常会执行一些异步操作,一旦完成,可以调用resolve函数来将promise对象的状态改为fulfilled即完成,或者发生错误时将promise对象的状态改为rejected即失败。
- 如果在executor函数中抛出一个错误,那么该promise状态为rejected,executor函数的返回值被忽略。
- executor中,resolve或reject函数只能执行其中的一个
promise的状态:
- pending:初始状态,不是成功或失败
- fulfilled:意味着操作成功完成
- rejected:意味着操作失败
Promise.then(onFulfilled, onRejected)
参数是2个函数,根据Promise的装态来调用不同的函数,fulfilled走OnFulfilled函数,rejected走onRejected函数。then的返回值是一个新的promise对象,执行任意一个函数,对这个promise对象来说就是其返回值。调用任意一个函数后,其返回值可以被后续的then方法继续捕捉。
catch(onRejected)
为当前Promise对象添加一个拒绝回调,返回一个新的Promise对象。
我们来看一个简单的例子:
var myPromise = new Promise(
function (resolve, reject){
//resolve('hello')
console.log('~~~~~~~~~~')
reject('hello world!')
}
)
console.log(myPromise)
var pro1 = myPromise.then(
(value) => console.log(1, myPromise, value),
(reason) => console.log(2, myPromise, reason) // 不管哪个回调函数被执行,新的promise对象的状态都会变为fulfilled
)
// 可以继续被捕捉
var pro2 = pro1.then(
(value) => console.log(3, myPromise, value),
(reason) => console.log(4, myPromise, reason)
)
pro2.then(
value => {
console.log(5, pro2, value)
return Promise.reject('pro2 rejected') // 将新的promise对象的状态改为rejected
},
reason => console.log(6, pro2, reason)
).catch(
reason => {
console.log(7, reason)
return Promise.resolve(reason + '*') // 将新的promise对象的状态改为resolved
}
).then(
value => console.log(8, value),
reason => console.log(9, reason)
)
/*
Promise { <rejected> 'hello world!' }
2 Promise { <rejected> 'hello world!' } 'hello world!'
3 Promise { <rejected> 'hello world!' } undefined
5 Promise { undefined } undefined
7 'pro2 rejected'
8 'pro2 rejected*'
*/
对Promise的几点总结:
Promise:resolve, reject两个函数无返回值
then方法返回一个新的Promise对象,新对象的打印结果为then方法执行的函数的返回值;catch方法也是返回一个新的Promise对象。
then的回调函数:
fulfilled成功的状态 ==> 会调用onfulfilled回调函数,其参数为value
rejected失败的状态 ==> 会调用onrejected回调函数,其参数为reason
不管哪一个回调函数执行后,新的promise对象的状态就变为fulfilled
catch只有一个回调函数==> reason
如果不能catch到,以当前对象(pro1)的结果作为新对象(pro2)的结果;如果catch到,新的promise对象的状态就变为fulfilled
再来看一个例子:
function runAsync(){
return new Promise(function(resolve, reject){
setTimeout(function(){
console.log('do something')
resolve('ok')
}, 3000) // 3000毫秒也就是3秒
})
}
runAsync().then(
value => {
console.log(value)
return Promise.reject(value + '*****') // 将新的promise对象的状态改为rejected
}
).catch(
reason => {
console.log(reason)
return Promise.resolve(reason + '~~~~~~~~~~~') // 将新的promise对象的状态改为resolved
}
).then(
value => {
console.log(value)
console.log('Promise END')
}
)
console.log('========FIN========')
/*
========FIN========
do something
ok
ok*****
ok*****~~~~~~~~~~~
Promise END
*/