promise
.then((res) => {
console.log('then: ', res)
})
.catch((err) => {
console.log('catch: ', err)
})
解析:
构造函数中的 resolve 或 reject 只有第一次执行有效,多次调用没有任何作用,呼应代码二结论:promise 状态一旦改变则不能再变。
运行结果:
then: success1
05
Promise.resolve(1)
.then((res) => {
console.log(res)
return 2
})
.catch((err) => {
return 3
})
.then((res) => {
console.log(res)
})
解析:
promise 可以链式调用。提起链式调用我们通常会想到通过 return this 实现,不过 Promise 并不是这样实现的。promise 每次调用 .then 或者 .catch 都会返回一个新的 promise,从而实现了链式调用。
运行结果:
1
2
06
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(‘once’)
resolve(‘success’)
}, 1000)
})
const start = Date.now()
promise.then((res) => {
console.log(res, Date.now() - start)
})
promise.then((res) => {
console.log(res, Date.now() - start)
})
解析:
promise 的 .then 或者 .catch 可以被调用多次,但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变,并且有了一个值,那么后续每次调用 .then 或者 .catch 都会直接拿到该值。
运行结果:
once
success 1005
success 1007
07
Promise.resolve()
.then(() => {
return new Error(‘error!!!’)
})
.then((res) => {
console.log('then: ', res)
})
.catch((err) => {
console.log('catch: ', err)
})
解析:
.then 或者 .catch 中 return 一个 error 对象并不会抛出错误,所以不会被后续的 .catch 捕获,需要改成其中一种:
return Promise.reject(new Error(‘error!!!’))
throw new Error(‘error!!!’)
因为返回任意一个非 promise 的值都会被包裹成 promise 对象,即 return new Error(‘error!!!’) 等价于 return Promise.resolve(new Error(‘error!!!’))。
运行结果:
then: Error: error!!!
at
08
const promise = Promise.resolve()
.then(() => {
return promise
})
promise.catch(console.error)
解析:.then 或 .catch 返回的值不能是 promise 本身,否则会造成死循环。类似于:
process.nextTick(function tick () {
console.log(‘tick’)
process.nextTick(tick)
})
运行结果:
TypeError: Chaining cycle detected for promise #
09
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
解析:
.then 或者 .catch 的参数期望是函数,传入非函数则会发生值穿透。
运行结果:
1
10
Promise.resolve()
.then(function success (res) {
throw new Error(‘error’)
}, function fail1 (e) {
console.error('fail1: ', e)
})
.catch(function fail2 (e) {
console.error('fail2: ', e)
})
解析:
.then 可以接收两个参数,第一个是处理成功的函数,第二个是处理错误的函数。
.catch 是 .then 第二个参数的简便写法,但是它们用法上有一点需要注意:.then 的第二个处理错误的函数捕获不了第一个处理成功的函数抛出的错误,而后续的 .catch 可以捕获之前的错误。
当然以下代码也可以:
Promise.resolve()
.then(function success1 (res) {
throw new Error(‘error’)
}, function fail1 (e) {
console.error('fail1: ', e)
})
.then(function success2 (res) {
}, function fail2 (e) {
console.error('fail2: ', e)
})
运行结果:
fail2: Error: error
at success ()
11
process.nextTick(() => {
console.log(‘nextTick’)
})
Promise.resolve()
.then(() => {
console.log(‘then’)
})
setImmediate(() => {
console.log(‘setImmediate’)
})
console.log(‘end’)
解析:
process.nextTick 和 promise.then 都属于 microtask,而 setImmediate 属于 macrotask,在事件循环的 check 阶段执行。事件循环的每个阶段(macrotask)之间都会执行 microtask,事件循环的开始会先执行一次 microtask。
运行结果:
end
nextTick
then
setImmediate
编程题
上面题目太基础,没有挑战性?那就来点有难度的!
12
红灯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
13
请实现一个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;
};
14
现有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。
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/2bd83cabef1daa2ac38f60b8da094e09.jpeg)
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里可以领取。
在。**
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-VmOAxII8-1712388343856)]
[外链图片转存中…(img-dLS1njam-1712388343856)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-mDN5nziz-1712388343856)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/2bd83cabef1daa2ac38f60b8da094e09.jpeg)
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里可以领取。
[外链图片转存中…(img-NbWEx8ZB-1712388343857)]