前端面试总结06-异步进阶

1.事件循环

（1：JS是单线程运行的

（2：异步要基于回调来实现

（3：event loop就是异步回调的实现原理

2.JS如何执行

从前到后一行一行执行

如果某一行执行报错，则停止下面代码的执行

先执行同步代码再执行异步代码

3.eventloop 过程（不包含宏任务与微任务）

（1:同步代码放在call Stack一行一行执行（主栈）

（2：遇到异步，会先“记录”下来等待时机

（3：时机到了就移动到Callback Queue中（任务队列）

（4：如Call Stack为空，EventLoop开始工作

（5：轮询查找Callback Queue,如有则移动到Call Stack中执行

（6：重复上一步轮询查找

4.Dom事件和EventLoop

（1：JS是单线程运行的

（2：异步（setTimeout,ajax等）使用回调，要基于EventLoop来实现

（3：Dom事件也使用回调，基于EventLoop

5.Promise基础

1）Promise三种状态

（1：Promise有三种状态：pending,resolved,rejected

（2：pending->resolved,pending->rejected

（3：变化不可逆

2）状态的表现

（1：pending状态，不会触发then和catch

（2：resolved状态，会触发后续的then回调函数

（3：rejected状态,会触发后续的catch回调函数

3）promise的then和catch如何影响状态的变化

then和catch改变状态

（1：then正常返回resolved,里面有报错则返回rejected

（2：catch正常返回resolved，里面有报错则返回rejected

 

6.async/await

1）async和promise的关系

（1：async/await是消灭异步回调的终极武器

（2：但和promise并不互斥

（3：反而两者相辅相成

（4：执行async函数，返回的是Promise对象

（5：await相当于Promise的then

（6：try...catch..可捕获异常，代替了Promise的catch

 

 

 

 

 

 

 

 

 7.eventloop与dom渲染

每次Call Stack清空（即每次轮询结束），即同步任务执行完

都是dom重新渲染的机会，Dom结构如有改变则重新渲染

然后再去触发下一次EventLoop

8.微任务与宏任务的区别

（1：宏任务：Dom渲染后触发，如setTimeout，setInterval,Ajax,Dom事件

（2：微任务：Dom渲染前触发，如Promise，async/await

（3：微任务执行时机比宏任务要早

 

 

 9.手写Promise

class MyPromise{

constructor(fn){

state='pending'

value=undefined;

reason=undefined;

resolveCallbacks=[];

rejectCallbacks=[];

const resolveHandler=(value)=>{

if(this.state==='pending'){

this.state='fulfilled'

this.value=value;

resolveCallbacks.forEach(fn=>fn(this.value))

}

}

const rejectHandler=(reason)=>{

if(this.state==='pending'){

this.state='rejected'

this.reason=reason;

rejectCallbacks.forEach(fn=>fn(this.reason))

}

try{

fn(resolveHandler,rejectHandler),

}

catch(err){

rejectHandler(err);

}

}

then(fn1,fn2){

fn1=typeof fn1 ==='function'?fn1:(v)=>v;

fn2=typeof fn2 ==='function'?fn2:(e)=>e;

if(this.state==='pending'){

const p1 = new MyPromise((resolve,reject)=>{

this.resolveCallbacks.push((resolve.reject)=>{

 try{

const newValue =fn1(this.value);

resolve(newValue);

}

catch(err){

reject(err);

}

})

this.rejectCallbacks.push((resolve,reject)=>{

try{

const newReason = fn1(this.reason);

reject(newReason);

}

catch(err){

reject(err);

}

})

})

return p1;

}

if(this.state==='fulfilled'){

 const p1 = new MyPromise((resolve,reject)=>{

try{

const newValue = fn1(this.value);

resolve(newValue);

}

catch(err){

reject(err);

}

})

return p1;

}

if(this.state==='rejected'){

 const p1 = new MyPromise((resolve,reject)=>{

try{

const newReason = fn1(this.reason);

reject(newReason);

}

catch(err){

reject(err);

}

})

return p1;

}

}

catch(fn){

return this.then(null,fn);

}

}

MyPromise.resolve=function(value){

return new Promise((resolve,reject)=>resolve(value));

}

MyPromise.reject=function(reason){

return new Promise((resolve,reject)=>reject(reason));

}

MyPromise.all=function(promiseList=[]){

const p1 = new Promise((resolve,reject)=>{

const result =[];

const length = promiseList.length;

let resolveCount = 0;

promiseList.forEach(p=>{

p.then(data=>{

result.push(data);

resolveCount++;

if(resolveCount===length){

resolve(result);

}

}).catch(err=>{

reject(err);

})

})

})

return p1;

}

MyPromise.race = function(promiseList=[]){

let resolve = false;

const p1 = new Promise((resolve,reject)=>{

promiseList.forEach(p=>{

p.then(data=>{

if(!resolve){

resolve(data);

resolve=true;

}

}).catch((err)=>reject(err))

})

})

}

}