Promise的相关内容

1. 计算机原理

1.进程：CPU资源分配的最小单位。即进程要有资源，好比一个小区，小区的居委会等。

2.线程：CPU调度的最小单位。好比小区里物业的每一个人。

2. 浏览器原理

1. GUI渲染引擎

1. 解析HTML、CSS、构建DOM树 => 布局 =>绘制
2. 与JS引擎互斥，当执行JS引擎线程时，GUI渲染引擎会pending，当任务队列空闲时，继续执行GUI。

2. Js引擎

1. 处理JS，解析执行脚本
2. 分配、处理、执行待执行的事件，event队列
3. 阻塞GUI渲染引擎。

3. 定时器触发引擎

1. 异步定时器的执行与处理 - setTimeout、setInterval
2. 接收JS引擎分配的异步定时器任务，并计数
3. 处理完成后，交于事件触发线程触发。

4. 异步HTTP请求引擎

1. 异步执行请求类处理 - Promise、ajax等
2. 接收JS引擎分配的请求类任务
3. 处理完成后，将回调交于事件触发线程触发。

5. 事件触发引擎

1. 接收来源：定时器、异步、用户
2. 将回调回来的任务一次放入任务队列的队尾，还给JS引擎。

3. JS执行顺序问题

1. 宏任务macro:script setTimeout setInterval I/O

2. 微任务micro: new Promise{}.then()

3. 顺序

1. Memory Heap来分配内存，Call Stack为调用栈，来执行异步回调，DOM、AJAX、setTimeout通过webApis来执行。
2. 执行时，同步任务直接放在主线程队列中执行，异步任务分为宏任务和微任务。
3. 当主线程队列为空时，就会激活event loop来轮询，宏任务优先级要大于微任务，即先去执行宏任务，执行前查看是否有可执行的微任务，若有宏任务被pending，放入event queue中等待，接着将微任务放入主线程队列中执行，结束后执行event queue中的宏任务。

4. Promise框架 - 规范

1. Promise有哪些状态？ - pending 、 fulfilled 、 rejected
2. new Promise 执行器 executor() ,执行器参数有？ - resolve、reject
3. promise的默认状态是？ pending pf pr
4. promise成功，value保存成功的枚举
5. promise失败，reason保存失败
6. promise一定要有then，then接收两个回调onFulfilled(value)、onRejected(reason)

5. 手撕Promise

• 不加异步

//定义三种状态
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
const PENDING = 'PENDING'

class xPromise{
    constructor(executor){
        this.status = PENDING
        this.value = undefined
        this.reason = undefined

        //定义成功的回调
        let resolve = (value)=>{
            if(this.status === PENDING){
                this.status = FULFILLED
                this.value = value

            }
        }
        //定义失败的回调
        let reject = (reason) => {
            if(this.status === PENDING){
                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) {
            onRejected(this.reason)
        }
    }
}

• 加异步

//定义三种状态
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";
const PENDING = "PENDING";

class xPromise {
  constructor(executor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;

    //定义成功的回调
    this.onFulFilledCallbacks = []
    //定义失败的回调
    this.onRejectedCallbacks = []
    //定义成功的回调
    let resolve = (value) => {
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
        //依次执行失败的成功回调
        (this.onFulFilledCallbacks || []).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(onFulFilled, onRejected) {
    //执行成功的回调
    if (this.status === FULFILLED) {
      onFulFilled(this.value);
    }
    //执行失败的回调
    if (this.status === REJECTED) {
      onRejected(this.reason);
    }
    //执行异步回调
    if(this.status === PENDING) {
        this.onFulFilledCallbacks.push(()=>onFulFilled(this.value))
        this.onRejectedCallbacks.push(()=>onRejected(this.reason))
    }
  }
}