##promise解析
*啥是异步?
//异步执行
let count = 1
let timer = setTimeout(function () {
count++
console.log('in', count);
}, 1000);
console.log('out');
// out=>1000=>in
//循环执行
let count = 1
let timer = setInterval(function () {
count++
console.log('in', count);
}, 1000);
console.log('out');
setTimeout(function () {
clearInterval(timer)
console.log('clear');//第5秒后清空循环器
}, 5000);
//看不见的队列,存放着需要默默执行的命令###1.进程&线程
####a.概念 & 区别
####b.面试题
*映射到前端-浏览器
chrome新开一个窗口,是进程还是线程(可以理解为互相协作,相互之间独立)?=>进程(可以理解为完整的独立体系)
*发散
方向一:窗口(进程间)通信?=>storage | cookie=>多种存储的区别=>应用场景=>结合简历项目
方向二:浏览器原理(中高级岗位面试居多)
###2.EVENT-LOOP
####a.执行栈
*js单线程语言,单步执行
function func2() {
throw new Error('please check your call stack');
}
function func1() {
func2()
}
function func() {
func1()
}
func()####b.面试题
// 执行顺序
setTimeout(() => {
console.log('count');//5.宏任务2
}, 0);
new Promise(resolve => {
console.log('new Promise');//1.属于同步进入主线程 宏任务1
resolve()
}).then(() => {
console.log('Promise then');//3.微任务1
}).then(() => {
console.log('Promise then then');//4.微任务2
})
console.log('hi');//2.同步+宏任务1
//任务拆分 : macro | micro
//同步 | 异步
event-table:可以.理解为异步待执行
event queue:异步队列
同步的走同步的执行栈,异步的走异步的事件队列.
###promise化=>链式化
####a.理论-回调地狱
request.onreadystatechange = () => {
//回调后处理
}
//加时延
setTimeout(() => {
request.onreadystatechange = () => {
//回调后处理
setTimeout(() => {
//处理
request.onreadystatechange = () => {
//......
}
});
}
});
//promise化
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok')
});
}).then(res => {
request()
}).catch(err => {
console.log(err);
})多个异步顺序执行=>复合链式调用
function wait500(input) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(input + 500)
}, 500);
})
}
function wait1000(input) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(input + 1000)
}, 1000);
})
}
const p = new Promise((resolve, reject) => {
resolve(1)
})
p.then(wait500)
.then(wait1000)
.then(wait500)
.then(wait1000)
.then(res => {
console.log('end', res);
})
//全部执行完成回调
Promise.all([wait500, wait1000]).then(res => {
console.log('all end', res);
})
//有执行完成的立刻操作
Promise.race()([wait500, wait1000]).then(res => {
console.log('all end', res);
})####b.面试-promise
*1.promise状态 - pedding | fulfilled | rejected
executor(执行器):new Promise的时候立即执行,接收两个参数,resolve | rejected
*2.promise默认状态?状态是如何流转的?-默认是pedding,状态流转:pedding=>fulfilled | pedding=>rejected
内部维护成功value:underfined | thenable | promise
内部维护失败原因resaon
*3.promise返回值?-then方法:接收onFulfilled和onRejected
如果then时,promise已经成功,执行onFulfilled,参数value
如果then时,promise已经失败,执行onRejected,参数resaon
如果then中有异常,执行onRejected
*追问:手写?
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
class Promise {
constructor(executor) {
//1.默认状态-PENDING
this.status = 'PENDING'
//2.内部维护的变量值
this.value = undefined
this.reason = undefined
//成功的回调
let resolve = value => {
//状态流转
this.status = FULFILLED
this.value = value
}
//失败的回调
let reason = reason => {
//状态流转
this.status = REJECTED
this.reason = reason
}
try {
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
then(onFulfilled, onRejected) {
if (this.status === FULFILLED) {
onFulfilled(this.value)
}
if (this.status === REJECTED) {
onFulfilled(this.reason)
}
}
}
//异步怎么办?
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
class Promise {
constructor(executor) {
//1.默认状态-PENDING
this.status = 'PENDING'
//2.内部维护的变量值
this.value = undefined
this.reason = undefined
//存放回调
this.onResolvedCallbacks = []
this.onRejectedCallbacks = []
//成功的回调
let resolve = value => {
//状态流转
this.status = FULFILLED
this.value = value
this.onResolvedCallbacks.forEach(fn => fn())
}
//失败的回调
let reason = reason => {
//状态流转
this.status = REJECTED
this.reason = reason
this.onRejectedCallbacks.forEach(fn => fn())
}
try {
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
then(onFulfilled, onRejected) {
if (this.status === FULFILLED) {
onFulfilled(this.value)
}
if (this.status === REJECTED) {
onFulfilled(this.reason)
}
if (this.status === PENDING) {
//存放队列
this.onResolvedCallbacks.push(() => {
onFulfilled(this.value)
})
this.onRejectedCallbacks.push(() => {
onFulfilled(this.reason)
})
}
}
}