课程目标
- 了解计算机原理中进程/线程概念和区别以及浏览器原理
- Promise作用及常用方法
- Promise规范及手写简单Promise
知识要点
-
计算机中进程表示CPU资源分配的最小单位；线程表示CPU调度的最小单位
-
浏览器包括的线程有：
-
GUI渲染引擎： a.解析HTML、CSS，构建DOM树 => 布局 =>绘制 b.与JS引擎互斥，当执行JS引擎线程时，GUI会pending，当任务队列空闲时，才会继续执行GUI
-
JS引擎线程 a.处理JS，解析执行脚本 b.分配、处理、执行待执行的事件，构建event队列 c.阻塞GUI渲染
3.定时器触发引擎 a.异步定时器处理与执行--setTimeout/setInterval b.接受JS引擎分配的定时器任务，并计数 c.处理完成后交与事件触发线程触发
4.异步HTTP请求线程 a.异步执行请求类处理--Promise/Ajax等 b.接受JS引擎分配异步HTTP请求 c.监听回调，交给事件触发线程触发
5.事件触发引擎 a.接受来源--定时器、异步、用户操作 b.将回调过来的事件依次接入到任务队列队尾，还给JS引擎
- Promise简述：
- 解决异步请求和延迟时回调导致的无穷嵌套（回调地狱）
- 对多个异步事件执行通过链式调用
- 等异步事件全部执行完再操作 -- Promise.all([]).then(res=>{})
- 一旦有执行完成的立即操作 -- Promise.race([]).then(res=>{})
- Promise框架规范
- promise的三种状态：pending（默认状态）、fulfilled(成功状态）、rejected（失败状态）
- new Promise执行器executor()，执行参数是reslove,reject
- promise只能从默认状态向成功或失败状态流转
- promise中value表示保存成功状态的枚举值--undefined/thenable/promise
- promise中失败状态值--reason
- promise中一定会有then，接收来源为成功状态或失败状态的回调--onFulfilled(value)/onRejected(reason)
- 手写一个简单的Promise
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
class Promis{ //类
constructor(executor){ //构造
// 默认状态的处理：PENDING
this.status = PENDING
// 成功状态值
this.value = undfined
this.reason = undfined
this.onResolvedCallbacks = []
this.onRejectedCallbacks = []
let resolve = value =>{
if(this.status === PENDING){
this.status = FULFILLED
this.value = value
(this.onResolvedCallbacks || []).forEach(fn => fn())
}
}
let reject = reason =>{
if(this.status === PENDING){
this.status === REJECTED
this.reason = reason
(this.onRejectedCallbacks || []).forEach(fn => fn())
}
}
try{
executor(resolve,reject)
}catch(error){
reject(error)
}
}
then(onFuilled,onRejected){
if(this.status === FULFILLED){
onFuilled(this.value)
}
if(this.status === REJECTED){
onRejected(this.reason)
}
if(this.status === PENDING){
this.onResolvedCallbacks.push(() =>{
onFuilled(this.value)
})
this.onRejectedCallbacks.push(() =>{
onRejected(this.reason)
})
}
}
}
拓展
生成器 Generator
1：生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。星号可以紧挨着function关键字，也可以在中间添加一个空格
function* generator() {
const list = [1, 2, 3];
for (let i of list) {
yield i;
}
}
let g = generator();
console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 2, done: false}
console.log(g.next()); // {value: 3, done: false}
console.log(g.next()); // {value: undefined, done: true}
2：特性
- 每当执行完一条yield语句后函数就会自动停止执行, 直到再次调用next();
- yield关键字只可在生成器内部使用，在其他地方使用会导致程序抛出错误;
- 可以通过函数表达式来创建生成器, 但是不能使用箭头函数
迭代器 Iterator
迭代器Iterator 是 ES6 引入的一种新的遍历机制，同时也是一种特殊对象，它具有一些专门为迭代过程设计的专有接口。 每个迭代器对象都有一个next()方法，每次调用都返回一个当前结果对象。当前结果对象中有两个属性：
- value：当前属性的值
- done：用于判断是否遍历结束，当没有更多可返回的数据时，返回true 每调用一次next()方法，都会返回下一个可用的值，直到遍历结束
Async 和 Await
async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用
