Promise

在了解Promise之前先了解一下进程线程和浏览器原理

1.进程和线程

进程是CPU资源分配的最小单位，线程是CPU调度的最小单位，一个进程里可以有多个线程。

2.浏览器原理

五大主要引擎

3.JS执行原理（EVENT-LOOP）

a.执行栈

• JS单线程语言，单步执行

b.任务

任务分为宏任务和微任务，同时还有同步和异步的区别

宏任务：script setTimeout setInterval I/O

微任务：new Promise().then()

宏任务的优先级大于微任务，每执行完宏任务会去清空微任务队列然后再执行下一个宏任务。

Promise

promise框架

• 1. promise的状态：pending、fullfilled、rejected
• 2. new Promise 执行器executor(),执行参数：resolve、reject
• 3. promise的默认状态： pending，promise状态流转：只能单向地从pending到fullfilled或者pending到rejected
• 4. promise value保存成功状态的枚举：undefined/thenable/promise
• 5. 失败状态值：reason

promise接口

• 6. promise一定有then，then接收来源：两个回调 onFullfilled(value)+onRejected(reason)

    //三个状态。PENDING FULLFILLED REFJECTED
    const PENDING='PENDING' 
    const FULLFILLED='FULLFILLED' 
    const REFJECTED='REFJECTED'
    
    class Promise{
        constructor(executor){
            //默认状态的处理
            this.status = PENDING
            //成功状态的值
            this.value = undefined
            //失败状态的值
            this.reason = undefined
            
            //成功状态的回调
            let resolve = value =>{
                if(this.status === PENDING){
                    this.status=FULLFILLED
                    this.value=value
                }
            }
            //失败状态的回调
            let reject = reason =>{
                if(this.status ===PENDING){
                    this.status=REFJECTED
                    this.reason=reason
                }
            } 
        }
        
        try{
            executor(resolve,reject)
        }catch(error){
            reject(error)
        }
        
        then(onFullfilled,onRejected){
            if(this.status === FULLFILLED){
                onFullfilled(this.value)
            }
            if(this.status === REFJECTED){
                onRejected(this.reason)
            }
        }
        
    }

async await generator

    //1. async await
    function wait500(input){
        return new Promise((resolve, reject) =>{
            console.log('wait500',input);
            setTimeout(() =>{
                resolve(input + 500)
            },500);
        });
    }
    wait500.then(res =>{
         wait500.then(res =>{
              wait500.then(res =>{
                  
              })
         })
    })
    
    async function asyncCall(){
        const result = await wait500(0);
        result = await wait500(0);
        result = await wait500(0);
        result = await wait500(0);
        
        console.log('asyncCall',result);
    }
    asyncCall();
    
    //2. generator 步进代替then
    function* generator(){
        let index=0;
        while(true) yield index++;
    }
    
    let gen=generator();
    gen.next();
    console.log(gen.next().value);
    //结合流水线做自动化处理
    const GEN_LINE = [1,2,3,4,5,6];
    (GEN_LINE || []).forEach(it=>{
        console.log(gen.next(it).value);
    })

异步 异步与同步区别--依次调用

    //三个状态。PENDING FULLFILLED REFJECTED
    const PENDING='PENDING' 
    const FULLFILLED='FULLFILLED' 
    const REFJECTED='REFJECTED'
    
    class Promise{
        constructor(executor){
            //默认状态的处理
            this.status = PENDING
            //成功状态的值
            this.value = undefined
            //失败状态的值
            this.reason = undefined
            
            //存放成功的回调
            this.onResolveCallbacks=[]
            //存放失败的回调
            this.onRejectedCallbacks=[]
            
            //成功状态的回调
            let resolve = value =>{
                if(this.status === PENDING){
                    this.status=FULLFILLED
                    this.value=value
                    
                    //依次调用对应函数的执行
                   （this.onResolveCallbacks||[]).forEach(fn=>{
                   fn()})
                }
            }
            //失败状态的回调
            let reject = reason =>{
                if(this.status ===PENDING){
                    this.status=REFJECTED
                    this.reason=reason
                    
                    //依次调用对应函数的执行
                   （this.onRejectedCallbacks||[]).forEach(fn=>{
                   fn()})
                }
            } 
        }
        
        try{
            executor(resolve,reject)
        }catch(error){
            reject(error)
        }
        
        then(onFullfilled,onRejected){
            if(this.status === FULLFILLED){
                onFullfilled(this.value)
            }
            if(this.status === REFJECTED){
                onRejected(this.reason)
            }
            
            if(this.status === PENDING){
                this.onResolveCallbacks.push(()=>{
                    onFullfilled(this.value)
                })
                this.onRejectedCallbacks.push(()=>{
                    onRejected(this.reason)
                })
            }
        }
        
    }
//处理同步和异步问题本质上是在处理顺序和空间的关系，所以只需要开辟一个空间单独存放异步的东西