众所周知,javascript是一门单线程\异步、非阻塞、解释型脚本语言。所谓单线程,就是当上一句代码没执行完时,下一句代码不会执行。 所以当在页面中需要请求数据时,如果数据都是以单线程的形式请求,会造成上面的数据没有请求到时,下面的数据也不会发送请求,造成很卡的现象。
解决这个问题我们可以将请求代码写成异步请求的格式(ajax,axios);
虽然js引擎只维护一个主线程用来解释执行JS代码,但实际上浏览器环境中还存在其他的线程,例如处理AJAX,DOM,定时器等,我们可以称他们为工作线程。同时浏览器中还维护了一个消息队列,主线程会将执行过程中遇到的异步请求发送给这个消息队列,等到主线程空闲时再来执行消息队列中的任务。
同步任务的缺点是阻塞,异步任务的缺点是会使代码执行顺序难以判断。两者比较一下我们还是更倾向于后者。所以这里写个例子对时间循环做下总结。
console.log('start')
Promise((resovle,reject)=>{
console.log('1')
}).then(()=>{
setTimeout(() => {
console.log('2')
},0)
console.log('3')
})
console.log('4')
setTimeout(() => {
console.log('5')
},0)
console.log('end')
// 这段代码的执行顺序为
start ,1 , 4 ,end , 3 , 5 , 2
做下解释,因为Promise 本身为同步操作,一旦调用直接执行,而then方法调用的回调函数为微任务,所以会暂存到微任务队列中。setTimeout也为异步,但setTimeout为宏任务放入宏任务队列,在执行异步队列时,首先执行微任务中then的回调,又遇见了setTimeout宏任务再放入宏任务队列,等所有微任务执行完毕时,执行宏任务。