Open ChelesteWang opened 2 years ago
国内比较流行的看法:
[阮一峰: Promise 对象](http://es6.ruanyifeng.com/#docs/promise)
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了
Promise
对象。
Promise 真正的规范,一篇长文。
[Promises/A+](https://promisesaplus.com/)
截取几段:
Terminology
- “promise” is an object or function with a
then
method whose behavior conforms to this specification.- “thenable” is an object or function that defines a
then
method.- “value” is any legal JavaScript value (including
undefined
, a thenable, or a promise).- “exception” is a value that is thrown using the
throw
statement.- “reason” is a value that indicates why a promise was rejected.
return
代替 resolve
不可以,无法实现链式调用,且不符合规范。
示例:
const testReturn = (a:boolean):Promise<any> =>{
return new Promise((resolve,reject)=>{
if(a){
return 'this is return';
resolve('true');
console.log('this will not be exec');
throw new Error('error');
}else{
reject('false');
}
})
}
执行结果:
~/chen/FE/winSep/codes/javascript/es6promise/src ts-node return.ts
Promise { <pending> }
答案: 使用reject
而不是throw
const testReturn = (a:boolean):Promise<any> =>{
return new Promise((resolve,reject)=>{
if(a){
resolve('true');
console.log('this will be exec');
throw new Error('error');
}else{
reject('false');
}
})
}
console.log(testReturn(true));
执行结果
~/chen/FE/winSep/codes/javascript/es6promise/src ts-node return.ts
this will be exec
Promise { 'true' }
解释:
Promise的构造函数,以及被 then
调用执行的函数基本上都可以认为是在 try…catch
代码块中执行的,所以在这些代码中即使使用 throw
,程序本身也不会因为异常而终止。Promise的状态也不会发生改变。
如果在Promise中使用 throw
语句的话,会被 try...catch
住,最终promise对象也变为Rejected状态。
var promise = new Promise(function(resolve, reject){
throw new Error("message");
});
promise.catch(function(error){
console.error(error);// => "message"
});
运行
Error: message
代码像这样其实运行时倒也不会有什么问题,但是如果想把 promise
设置为Rejected状态的话,使用 reject
方法则更显得合理。
所以上面的代码可以改写为下面这样。
var promise = new Promise(function(resolve, reject){
reject(new Error("message"));
});
promise.catch(function(error){
console.error(error);// => "message"
})
总结:如果在Promise中使用 throw
语句的话,会被 try...catch
住,最终promise对象也变为Rejected状态。
Error
的时候, resolve
会将Promise.then
放在微任务队列中,当所有的宏任务执行结束的时候,执行微任务队列。const testReturn = (a:boolean):Promise<any> =>{
return new Promise((resolve,reject)=>{
if(a){
resolve('exec true');
console.log('this will be exec');
// throw new Error('error');
}else{
reject('false');
}
})
}
testReturn(true).then(str=>{
console.log(str);
})
执行结果
this will be exec
exec true
Error
的时候,Error
后面的代码不会被执行,但是Promise
的结果依旧是fulfilled
const testReturn = (a:boolean):Promise<any> =>{
return new Promise((resolve,reject)=>{
if(a){
resolve('exec true');
console.log('this will be exec');
throw new Error('error');
console.log('this will not be exec')
}else{
reject('false');
}
})
}
testReturn(true).then(str=>{
console.log(str);
// console.log(testReturn)
}).catch(err=>{
console.log('err: ',err);
})
执行结果
this will be exec
exec true
看例子:
const testReturn = (a:boolean):Promise<any> =>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(a){
resolve('exec true');
console.log('this will be second exec');
}else{
reject('false');
}
})
console.log('this will first be execd');
})
}
testReturn(true).then(str=>{
console.log(str);
// console.log(testReturn)
}).catch(err=>{
console.log('err: ',err);
})
结果
this will first be execd
this will be second exec
exec true
解释:
时间 | 宏任务队列 | 微任务队列 |
---|---|---|
1 | console.log('this will first be execd') |
|
2 | setTimeout |
|
3 | resolve('exec true'); //延迟:因为宏任务没有执行完 |
|
4 | console.log('this will be second exec'); |
|
最终执行顺序:
1->2->4(宏任务结束)->3(微任务结束)
一句话总结:await
等的就是一个Promise
。如果等的不是Promise
,那加了await
和不加没区别
Promise
的方法function util(args,callback){
if(err){
return callback(err);
}else{
return callback();
}
}
//调用
util(args,(err)=>{
if(err){
}else{
}
})
//Promisify
function utilPromise(args){
return new Promise((resolve,reject)=>{
if(err){
reject(err)
}else{
resolve();
}
})
}
//调用
utilPromise.then().catch()
Promise
转换为async/await
的方法async init(){
try{
await utilPromise();//resolve状态
}catch(e){
throw new Error(e); //reject状态
}
}
编程题一
红灯3秒亮一次,绿灯1秒亮一次,黄灯2秒亮一次;如何使用Promise让三个灯不断交替重复亮灯?(海康威视笔试题)
function red(){ console.log('red'); } function green(){ console.log('green'); } function yellow(){ console.log('yellow'); }
分析: 先看题目,题目要求红灯亮过后,绿灯才能亮,绿灯亮过后,黄灯才能亮,黄灯亮过后,红灯才能亮……所以怎么通过Promise实现?
换句话说,就是红灯亮起时,承诺2s秒后亮绿灯,绿灯亮起时承诺1s后亮黄灯,黄灯亮起时,承诺3s后亮红灯……这显然是一个Promise链式调用,看到这里你心里或许就有思路了,我们需要将我们的每一个亮灯动作写在then()方法中,同时返回一个新的Promise,并将其状态由pending设置为fulfilled,允许下一盏灯亮起。
function red() { console.log('red'); } function green() { console.log('green'); } function yellow() { console.log('yellow'); } let myLight = (timer, cb) => { return new Promise((resolve) => { setTimeout(() => { cb(); resolve(); }, timer); }); }; let myStep = () => { Promise.resolve().then(() => { return myLight(3000, red); }).then(() => { return myLight(2000, green); }).then(()=>{ return myLight(1000, yellow); }).then(()=>{ myStep(); }) }; myStep(); // output: // => red // => green // => yellow // => red // => green // => yellow // => red
编程题二
请实现一个mergePromise函数,把传进去的数组按顺序先后执行,并且把返回的数据先后放到数组data中。
const timeout = ms => new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, ms); }); const ajax1 = () => timeout(2000).then(() => { console.log('1'); return 1; }); const ajax2 = () => timeout(1000).then(() => { console.log('2'); return 2; }); const ajax3 = () => timeout(2000).then(() => { console.log('3'); return 3; }); const mergePromise = ajaxArray => { // 在这里实现你的代码 }; mergePromise([ajax1, ajax2, ajax3]).then(data => { console.log('done'); console.log(data); // data 为 [1, 2, 3] }); // 要求分别输出 // 1 // 2 // 3 // done // [1, 2, 3]
分析: 这道题主要考察用Promise控制异步流程,首先ajax1,ajax2,ajax3都是函数,只是这些函数执行后会返回一个Promise,按照题目要求只要顺序执行这三个函数就好了,然后把结果放到data中;
答案:
const mergePromise = ajaxArray => { // 在这里实现你的代码 // 保存数组中的函数执行后的结果 var data = []; // Promise.resolve方法调用时不带参数,直接返回一个resolved状态的 Promise 对象。 var sequence = Promise.resolve(); ajaxArray.forEach(item => { // 第一次的 then 方法用来执行数组中的每个函数, // 第二次的 then 方法接受数组中的函数执行后返回的结果, // 并把结果添加到 data 中,然后把 data 返回。 sequence = sequence.then(item).then(res => { data.push(res); return data; }); }); // 遍历结束后,返回一个 Promise,也就是 sequence, 他的 [[PromiseValue]] 值就是 data, // 而 data(保存数组中的函数执行后的结果) 也会作为参数,传入下次调用的 then 方法中。 return sequence; };
编程题三
现有8个图片资源的url,已经存储在数组urls中,且已有一个函数function loading,输入一个url链接,返回一个Promise,该Promise在图片下载完成的时候resolve,下载失败则reject。要求:任何时刻同时下载的链接数量不可以超过3个。 请写一段代码实现这个需求,要求尽可能快速地将所有图片下载完成。
var urls = ['https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kkkk1000.com/images/getImgData/Particle.gif', 'https://www.kkkk1000.com/images/getImgData/arithmetic.png', 'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif', 'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg', 'https://www.kkkk1000.com/images/getImgData/arithmetic.gif', 'https://www.kkkk1000.com/images/wxQrCode2.png']; function loadImg(url) { return new Promise((resolve, reject) => { const img = new Image() img.onload = () => { console.log('一张图片加载完成'); resolve(); } img.onerror = reject; img.src = url; }) };
解析 题目的意思是需要先并发请求3张图片,当一张图片加载完成后,又会继续发起一张图片的请求,让并发数保持在3个,直到需要加载的图片都全部发起请求。
用Promise来实现就是,先并发请求3个图片资源,这样可以得到3个Promise,组成一个数组promises,然后不断调用Promise.race来返回最快改变状态的Promise,然后从数组promises中删掉这个Promise对象,再加入一个新的Promise,直到全部的url被取完,最后再使用Promise.all来处理一遍数组promises中没有改变状态的Promise
function limitLoad(urls, handler, limit) { // 对数组做一个拷贝 const sequence = […urls]; let promises = []; //并发请求到最大数 promises = sequence.splice(0, limit).map((url, index) => { // 这里返回的 index 是任务在 promises 的脚标,用于在 Promise.race 之后找到完成的任务脚标 return handler(url).then(() => { return index; }); }); // 利用数组的 reduce 方法来以队列的形式执行 return sequence.reduce((last, url, currentIndex) => { return last.then(() => { // 返回最快改变状态的 Promise return Promise.race(promises) }).catch(err => { // 这里的 catch 不仅用来捕获前面 then 方法抛出的错误 // 更重要的是防止中断整个链式调用 console.error(err) }).then((res) => { // 用新的 Promise 替换掉最快改变状态的 Promise promises[res] = handler(sequence[currentIndex]).then(() => { return res }); }) }, Promise.resolve()).then(() => { return Promise.all(promises) }) } limitLoad(urls, loadImg, 3); /*因为 limitLoad 函数也返回一个 Promise,所以当 所有图片加载完成后,可以继续链式调用limitLoad(urls, loadImg, 3).then(() => { console.log('所有图片加载完成');}).catch(err => { console.error(err);})*/
编程题四
封装一个异步加载图片的方法 解析: 这个不难!
function loadImageAsync(url) { return new Promise(function(resolve,reject) { var image = new Image(); image.onload = function() { resolve(image) }; image.onerror = function() { reject(new Error('Could not load image at' + url)); }; image.src = url; }); }
请教一下编程题3中 ,.then(() => { return Promise.all(promises) })这行代码的作用是?
编程题一
红灯3秒亮一次,绿灯1秒亮一次,黄灯2秒亮一次;如何使用Promise让三个灯不断交替重复亮灯?(海康威视笔试题)
分析:
先看题目,题目要求红灯亮过后,绿灯才能亮,绿灯亮过后,黄灯才能亮,黄灯亮过后,红灯才能亮……所以怎么通过Promise实现?
换句话说,就是红灯亮起时,承诺2s秒后亮绿灯,绿灯亮起时承诺1s后亮黄灯,黄灯亮起时,承诺3s后亮红灯……这显然是一个Promise链式调用,看到这里你心里或许就有思路了,我们需要将我们的每一个亮灯动作写在then()方法中,同时返回一个新的Promise,并将其状态由pending设置为fulfilled,允许下一盏灯亮起。
编程题二
请实现一个mergePromise函数,把传进去的数组按顺序先后执行,并且把返回的数据先后放到数组data中。
分析:
这道题主要考察用Promise控制异步流程,首先ajax1,ajax2,ajax3都是函数,只是这些函数执行后会返回一个Promise,按照题目要求只要顺序执行这三个函数就好了,然后把结果放到data中;
答案:
编程题三
现有8个图片资源的url,已经存储在数组urls中,且已有一个函数function loading,输入一个url链接,返回一个Promise,该Promise在图片下载完成的时候resolve,下载失败则reject。要求:任何时刻同时下载的链接数量不可以超过3个。
请写一段代码实现这个需求,要求尽可能快速地将所有图片下载完成。
解析
题目的意思是需要先并发请求3张图片,当一张图片加载完成后,又会继续发起一张图片的请求,让并发数保持在3个,直到需要加载的图片都全部发起请求。
用Promise来实现就是,先并发请求3个图片资源,这样可以得到3个Promise,组成一个数组promises,然后不断调用Promise.race来返回最快改变状态的Promise,然后从数组promises中删掉这个Promise对象,再加入一个新的Promise,直到全部的url被取完,最后再使用Promise.all来处理一遍数组promises中没有改变状态的Promise
编程题四
封装一个异步加载图片的方法
解析:
这个不难!