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))
})
})
}
}
标签：异步,resolve,06,进阶,err,Promise,reject,catch,const From： https://www.cnblogs.com/qwqxyd/p/16733108.html