@[TOC](JS 的 Promise详解)欧诺个鱼
ES 6 开始支持 Promise。
Promise 对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示。简而言之,就是处理异步请求的。
之所以叫做 Promise,就是承诺做这件事,如果成功则怎么处理,失败则怎么处理。
// 语法
new Promise(
// 下面定义的函数是 executor
function(resolve, reject) {
...
}
)
# 间隔多少毫秒就执行函数一次,循环执行
# function 延时到的时候执行的函数
# delay 延时,缺省0,立即执行
setInterval(function[,delay]);
setInterval(() => {
console.log('I am working!')
}, 1000)
Info: Start process (上午10:26:11)
I am working!
I am working!
I am working!
Process canceled // F9
Info: End process (上午10:26:19)
# 等待多少毫秒就执行函数一次,结束
# function 延时到的时候执行的函数
# delay 延时,缺省0,立即执行
setTimeout(function[,delay]);
setTimeout(() => {
console.log('I am working!')
}, 2000)
Info: Start process (上午10:38:25)
I am working!
Info: End process (上午10:38:28)
var myPromise = new Promise(function(resolve, reject){
console.log(1, 'Do sth.')
setTimeout(() => {
console.log(2, '========');
resolve('Ok.');
}, 3000);
})
console.log(3, myPromise)
setInterval(() => {
console.log(4, myPromise, '++++++++')
}, 1000)
Info: Start process (上午10:48:49)
1 'Do sth.'
3 Promise { <pending> }
4 Promise { <pending> } '++++++++'
4 Promise { <pending> } '++++++++'
2 '========'
4 Promise { 'Ok.' } '++++++++'
4 Promise { 'Ok.' } '++++++++'
Process canceled
Info: End process (上午10:48:59)
var myPromise = new Promise(function(resolve, reject){
console.log(1, 'Do sth.')
setTimeout(() => {
console.log(2, '========');
resolve('Ok.');
}, 3000);
})
console.log(3, myPromise)
setInterval(() => {
console.log(4, myPromise, '++++++++')
}, 1000)
let pro1 = myPromise.then(
value => {
console.log(5, 'Successful.');
return 11111;
},
reason => {
console.log(6, 'Failed.')
return 22222;
}
)
setInterval(() => {
console.log(7, pro1, '@@@@@')
}, 1000)
Info: Start process (上午11:02:43)
1 'Do sth.'
3 Promise { <pending> }
4 Promise { <pending> } '++++++++'
7 Promise { <pending> } '@@@@@'
4 Promise { <pending> } '++++++++'
7 Promise { <pending> } '@@@@@'
2 '========'
5 'Successful.'
4 Promise { 'Ok.' } '++++++++'
7 Promise { 11111 } '@@@@@'
4 Promise { 'Ok.' } '++++++++'
7 Promise { 11111 } '@@@@@'
Process canceled
Info: End process (上午11:02:53)
var myPromise = new Promise(function(resolve, reject){
console.log(1, 'Do sth.')
setTimeout(() => {
console.log(2, '========');
resolve('Ok.');
}, 3000);
})
console.log(3, myPromise)
setInterval(() => {
console.log(4, myPromise, '++++++++')
}, 1000)
let pro1 = myPromise.catch(
reason => {
console.log(5, reason, '&&&&&&&&')
return 22222;
}
)
setInterval(() => {
console.log(6, pro1, '@@@@@')
}, 1000)
Info: Start process (上午11:07:53)
1 'Do sth.'
3 Promise { <pending> }
4 Promise { <pending> } '++++++++'
7 Promise { <pending> } '@@@@@'
4 Promise { <pending> } '++++++++'
7 Promise { <pending> } '@@@@@'
2 '========'
4 Promise { 'Ok.' } '++++++++'
7 Promise { 'Ok.' } '@@@@@'
4 Promise { 'Ok.' } '++++++++'
7 Promise { 'Ok.' } '@@@@@'
4 Promise { 'Ok.' } '++++++++'
7 Promise { 'Ok.' } '@@@@@'
4 Promise { 'Ok.' } '++++++++'
7 Promise { 'Ok.' } '@@@@@'
4 Promise { 'Ok.' } '++++++++'
7 Promise { 'Ok.' } '@@@@@'
Process canceled
Info: End process (上午11:08:00)
var myPromise = new Promise(function(resolve, reject){
console.log(1, 'Do sth.')
setTimeout(() => {
console.log(2, '========');
reject('Not Ok.');
}, 3000);
})
console.log(3, myPromise)
setInterval(() => {
console.log(4, myPromise, '++++++++')
}, 1000)
let pro1 = myPromise.catch(
reason => {
console.log(5, reason, '&&&&&&&&')
return 22222;
}
)
setInterval(() => {
console.log(6, pro1, '@@@@@')
}, 1000)
Info: Start process (上午11:12:49)
1 'Do sth.'
3 Promise { <pending> }
4 Promise { <pending> } '++++++++'
6 Promise { <pending> } '@@@@@'
4 Promise { <pending> } '++++++++'
6 Promise { <pending> } '@@@@@'
2 '========'
5 'Not Ok.' '&&&&&&&&'
4 Promise { <rejected> 'Not Ok.' } '++++++++'
6 Promise { 22222 } '@@@@@'
4 Promise { <rejected> 'Not Ok.' } '++++++++'
6 Promise { 22222 } '@@@@@'
4 Promise { <rejected> 'Not Ok.' } '++++++++'
6 Promise { 22222 } '@@@@@'
4 Promise { <rejected> 'Not Ok.' } '++++++++'
6 Promise { 22222 } '@@@@@'
4 Promise { <rejected> 'Not Ok.' } '++++++++'
6 Promise { 22222 } '@@@@@'
Process canceled
Info: End process (上午11:12:57)
function runAsync() {
return new Promise (function(resolve, reject){
setTimeout(function(){
console.log('Do Sth...');
resolve('OK...')
// reject('NOT OK...');
}, 3000);
});
}
runAsync().then(
value => {
console.log(1, value);
return Promise.reject(value + '*===*');
},
reason => {
console.log(2, reason);
return Promise.resolve(reason + '===');
}
).catch(
reason => {
console.log(3, reason);
return Promise.resolve(reason + '*===*');
}
).then(
reason => {
console.log(4,reason);
console.log(5, 'Reason + Promise END')
return Promise.resolve(reason + "===");
},
value => {
console.log(6, value);
console.log(7, 'Value + Promise END');
}
)
console.log(8, "===== FIN =====")
Info: Start process (上午12:25:25)
8 '===== FIN ====='
Do Sth...
1 'OK...'
3 'OK...*===*'
4 'OK...*===**===*'
5 'Reason + Promise END'
Info: End process (上午12:25:28)
function runAsync() {
return new Promise (function(resolve, reject){
setTimeout(function(){
console.log('Do Sth...');
// resolve('OK...')
reject('NOT OK...');
}, 3000);
});
}
runAsync().then(
value => {
console.log(1, value);
return Promise.reject(value + '*===*');
},
reason => {
console.log(2, reason);
return Promise.resolve(reason + '===');
}
).catch(
reason => {
console.log(3, reason);
return Promise.resolve(reason + '*===*');
}
).then(
reason => {
console.log(4,reason);
console.log(5, 'Reason + Promise END')
return Promise.resolve(reason + "===");
},
value => {
console.log(6, value);
console.log(7, 'Value + Promise END');
}
)
console.log(8, "===== FIN =====")
Info: Start process (上午12:25:56)
8 '===== FIN ====='
Do Sth...
2 'NOT OK...'
4 'NOT OK...==='
5 'Reason + Promise END'
Info: End process (上午12:25:59)