Promise

区别实例对象与函数对象

　　一、实例对象：new 函数产生的对象，称为实例对象，简称对象

　　二、函数对象：将函数做为对象使用时，简称函数对象

<script>
    function Fn(){//Fn函数
    }
    const fn = new Fn() //Fn是构造函数，fn是实例对象（简称对象）
    console.log(Fn.prototype)//Fn是函数对象
    Fn.bind({})//调用函数对象的bind方法
    $("#test") //jQuery函数
    $.get("/test") //jQuery函数对象，括号左边是函数，点的左边是对象
  </script>

两种类型的回调函数

　　回调函数：回调函数就是一个参数，将这个函数做为参数传到另外一个函数里面，当那个函数执行完以后，再执行传进去的这个函数。这个过程就叫作回调

　　同步回调

　　　　理解：当即执行，彻底执行完了才结束，不会放入到回调队列中

　　　　例子：数组遍历相关的回调函数，Promise的excutor函数

　　异步回调

　　　　理解：不会当即执行，会放入到队列中未来执行

　　　　例子：定时器回调、ajax、Promise的成功|失败的回调

<script>
    //一、同步回调函数
    const arr = [1,2,3]
    arr.forEach((item) =>{//遍历回调函数，同步回调函数，不会放入队列，一上来就要执行完
        console.log(item)
    })
    console.log("forEach函数以后")
    //二、异步回调函数
    setTimeout(() => {//异步回调函数，会放入队列中未来执行
        console.log("timeout callback()")
    }, 0)
    console.log("setTimeout函数以后")//先于setTimeout的回调函数执行
</script>

JS中的error处理

　　一、错误的类型

　　　　一、Error：全部错误的父类型

　　　　二、ReferenceError：引用的变量不存在

　　　　三、TypeError：数据类型不正确的错误

　　　　四、RangeError：数据值再也不其容许的范围内

　　　　五、SyntaxError：语法错误

　　二、错误处理

　　　　一、捕获错误：try ... catch

　　　　二、抛出错误：throw error

　　三、错误对象

　　　　message属性：错误相关信息

　　　　stack属性：函数调用栈记录信息

<script>
    //一、常见的内置错误
    //console.log(aaa) //ReferenceError: aaa is not defined
    console.log("----")//没有捕获error，下面的代码不会执行
    let b = null
    //console.log(b.xx) //TypeError: b is null
    // function fn(){
    //     fn()
    // }
    // fn() //RangeError: Maximum call stack size exceeded
    const c = """" //SyntaxError: unexpected token: string literal

　　//二、错误处理
    try{
        let d
        console.log(d.xxx)
    }catch(error){
        console.log(error.message)//d is undefined
        console.log(error.stack)// @file:///home/xdl/python/web/day01/code/01_html.html:71:3
    }
    console.log("出错以后")//能够正常执行
    //抛出异常
    function something(){
        if(Date.now()%2===1){
            console.log("当前时间为奇数，能够执行任务")
        }else{//若是时间为偶数抛出异常，由调用者来处理
            throw new Error("当前时间为偶数，没法执行任务")
        }
    }
    try{
        something()
    }catch(error){
        console.log(error.message)//当前时间为偶数，没法执行任务
    }
</script>

promise的理解和使用

　　一、promise是什么？

　　　　理解：

　　　　　　一、抽象表达：promise是JS中进行异步编程的新的解决方案（以前是纯回调的方式）

　　　　　　二、具体表达：

　　　　　　　　一、从语法上来讲：promise是一个构造函数

　　　　　　　　二、从功能上来讲：promise对象用来封装一个异步操做并能够获取其结果

　　　　promise的状态改变：

　　　　　　一、pedding变为resolved

　　　　　　二、pedding变为rejected

　　　　　　说明：只有这两种，且一个promise对象只能改变一次，不管变为成功仍是失败，都会有一个结果数据，成功的结果数据通常称为value，失败的结果数据通常称为reason

　　　　promise的基本使用

<script>
    //一、建立一个新的promise对象
    const p = new Promise((resolve, reject) => {//执行器函数，同步回调
        //二、执行异步任务
        setTimeout(() => {
            const time = Date.now() //若是当前时间是偶数表明成功，不然表明失败
            if (time % 2 === 0){
                //3.一、若是成功，调用resolve（value）
                resolve("成功的数据，time=" + time)
            }else{
                //3.二、若是失败，调用reject（reason）
                reject("失败的数据，time=" + time)
            }  
        },1000)
    })
    p.then(
        (value) => {//接收获得成功的value数据，onResolved
            console.log("成功的回调", value)
        },
        (reason) => {//接收获得失败的reason数据, onRejected
            console.log("失败的回调", reason)
        }
    )
</script>　　　

　　二、为何要使用promise

 　　　　一、指定回调函数的方式更加灵活：

　　　　　　旧的：必须在启动异步任务前指定

　　　　　　promise：启动异步任务 => 返回promise对象=>给promise对象绑定回调函数（甚至能够在异步执行完成以后）

　　　　二、支持链式调用，能够解决回调地狱问题

　　　　　　什么是地狱问题？回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件

　　　　　　回调地狱的缺点？不便于阅读，不便于异常处理

　　　　　　解决方案？promise链式调用

　　　　　　终极解决方案？async、await

　　三、如何使用promise

　　　　API

　　　　　　一、Promise构造函数：Promise(excutor){}

　　　　　　　　excutor函数：同步执行（resolve， reject）=> {}

　　　　　　　　reslove函数：内部定义成功时咱们调用的函数value=>{}

　　　　　　　　reject函数：内部定义失败时咱们调用的函数 reason=>{}

　　　　　　　　说明：excutor会在promise内部当即同步回调，异步操做在执行器中执行

　　　　　　二、Promise.prototype.then方法：（onResolved, onRejected）=>{}

　　　　　　　　onResolved函数：成功的回调函数 （value）=>{}

　　　　　　　　onRejected函数：失败的回调函数（reason）=>{}

　　　　　　　　说明：指定用于获得成功value的成功回调和用于获得失败reason的失败回调，返回一个新的promise对象

　　　　　　三、Promise.prototype.catch方法：（onRejected）=>{}

　　　　　　　　onRejected函数：失败的回调函数（reason）=>{}

　　　　　　　　说明：then()的语法糖，至关于：then（undefined，onRejected）

new Promise((resolve, reject) =>{
        setTimeout(()=>{
            resolve("成功的数据")
            //reject("失败的数据") // 只会执行第一个
        }, 1000)
    }).then(
        (value) => {
            console.log("onReaolved()1",value)
        }
    ).catch(
        (reason) => {
            console.log("onRejected()1", reason)
        }
    )

　　　　　　四、Promise.resolve方法：（value）=> {}

　　　　　　　　value：成功的数据或promise对象

　　　　　　　　说明：返回一个成功或失败的promise对象

　　　　　　五、Promise.reject方法：（reason）=>{}

　　　　　　　　reason：失败缘由

　　　　　　　　说明：返回一个失败的promise对象

　　/产生一个成功值为1的promise对象
    const p1 = new Promise((resolve, reject)=>{
        resolve(1)
    })
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3)
    p1.then(value=>{console.log(value)})
    p2.then(value=>{console.log(value)})
    p3.then( null, reason=>{console.log(reason)})
    p3.catch(reason=>{console.log(reason)})

　　　　　　六、Promise.all方法：（promise）=>{}

　　　　　　　　promise：包含n和promise的数组

　　　　　　　　说明：返回一个新的promise，只有全部的promise都成功才成功，只要有一个失败了就直接失败

const p1 = new Promise((resolve, reject)=>{
        resolve(1)
    })
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3)
    const pAll = Promise.all([p1,p2,p3])
    pAll.then(
        values => {
            console.log("all onResolved()", values)//若是成功将返回一个数组
        },
        reason =>{
            console.log("all onRejected()", reason)//3
        }
    )

　　　　　　七、Promise.race方法：（promise）=>{}

　　　　　　　　promise：包含n和promise的数组

　　　　　　　　说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态　　

//产生一个成功值为1的promise对象
    const p1 = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(1)
        })
    })
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3)
    const pRace = Promise.race([p1,p2,p3])
    pRace.then(
        value => {
            console.log("race onResolved()", value)
        },
        reason =>{
            console.log("race onRejected()", reason)
        }
    )

promise的关键问题

　　一、如何改变Promise的状态

　　　　一、resolve(value)：若是当前是pedding就会变为resolved

　　　　二、reject(reason)：若是当前是pedding就会变为rejected

　　　　三、抛出异常：若是当前状态是pedding就会变为rejeceted

const p = new Promise((resolve, reject) =>{
        //resolve(1)//promies变为resolved成功状态
        //reject(2)//promise变为rejected失败状态
        //throw new Error("出错了")//抛出异常promise变为rejected失败状态，reason 为抛出的error
        throw 3
    });
    p.then(
        reason => {console.log("reason:", reason)}//3
    )

　　二、一个promise指定多个成功或失败回调函数，都会调用吗？

　　　　当promise改变为对应状态时都会调用

const p = new Promise((resolve, reject) =>{
        resolve(1)
        
    });
    p.then(
        value => {console.log("value1:", value)}//value1: 1
    )
    p.then(
        value => {console.log("value2:", value)}//value2: 1
    )

　　三、改变promise状态和指定回调函数谁先谁后？

　　　　一、都有可能，正常状况下时先指定回调函数再改变状态，但也能够先改变状态再指定回调函数

　　　　二、如何先改变状态再指定回调？

　　　　　　一、在执行器中直接调用resolve()/reject()

　　　　　　二、延迟更长时间才调用then()

//如何先改变状态，后指定回调函数
    new Promise((resolve, reject) =>{
        reject(1)//先改变的状态（同时指定数据）    
    }).then(//后指定回调函数，异步执行回调函数
        value => {console.log("value:", value)},
        reason => {console.log("reason:", reason)}
    )

　　　　三、何时才能获得数据？

　　　　　　一、若是先指定回调，那么状态发生改变时，回调函数就会调用，获得数据

　　　　　　二、若是先改变的状态，那么指定回调时，回调函数就会调用，获得数据

new Promise((resolve, reject) =>{
        setTimeout(()=>{
            resolve(1)//后改变的状态（同时指定数据），异步执行回调函数
        }, 1000)    
    }).then(//先指定回调函数，保存当前指定的回调函数
        value => {console.log("value1:", value)}//value1: 1
    )

　　四、promise.then（）返回的新的promise的结果状态由什么决定？

　　　　一、简单表达：由then()指定的回调函数执行的结果决定

　　　　二、详细表达：

　　　　　　一、若是抛出异常，新promise变为rejected，reason为抛出的异常

　　　　　　二、若是返回的是非promise的任意值，新的promise变为resolved，value为返回的值

　　　　　　三、若是返回的是另外一个新promise，此promise的结果就会成为新promise的结果 

new Promise((resolve, reject) =>{
        resolve(1)
        //reject(1)
    }).then(
        value => {
            console.log("onResolved1():", value)
            //return 2
            //return Promise.resolve(3)
            //return Promise.reject(4)
            throw 5
        },
        reason => {
            console.log("onRejected1():", reason)
        }
    ).then(
        value => {
            console.log("onResolved2():", value)
        },
        reason => {
            console.log("onRejected2():", reason)
        }
    )

　　五、promise如何串连多个操做任务

　　　　一、promise的then()返回一个新的promise，能够当作then()的链式调用

　　　　二、经过then的链式调用串连多个同步/异步任务

new Promise((resolve, reject) =>{
        setTimeout(()=>{
            console.log("执行任务1(异步)")
            resolve(1)
        },1000);
    }).then(
        value => {
            console.log("任务1的结果:", value)
            console.log("执行任务2(同步):")
            return 2
        }
    ).then(
        value => {
            console.log("任务2的结果():", value)
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    console.log("执行任务3(异步)")
                    resolve(3)
                },1000)
            })
        }
    ).then(
        value => {
            console.log("任务3的结果", value)
        }
    )

　　六、promise异常传透？

　　　　一、当使用promise的then链式调用时，能够在最后指定失败的回调

　　　　二、前面任何操做出了异常，都会传到最后失败的回调中处理

new Promise((resolve, reject) =>{
        resolve(1)
        //reject(1)
    }).then(
        value => {
            console.log("onResolveed1():", value)
            return Promise.reject(2)
        }
    ).then(
        value => {
            console.log("onResolveed2():", value)
            return 3
        }
    ).then(
        value => {
            console.log("onResolveed3()", value)
        }
    ).catch(reason => {
        console.log("onRejected1()", reason)
    })

　　七、中断promise链？

　　　　一、当时用promise的then的链式调用时，在中间中断，再也不调用后面的回调函数

　　　　二、办法：在回调函数中返回一个pedding状态的promise对象

new Promise((resolve, reject) =>{
        resolve(1)
        //reject(1)
    }).then(
        value => {
            console.log("onResolveed1():", value)
            return Promise.reject(2)
        }
    ).then(
        value => {
            console.log("onResolveed2():", value)
            return 3
        }
    ).then(
        value => {
            console.log("onResolveed3()", value)
        }
    ).catch(reason => {
        console.log("onRejected1()", reason)
        return new Promise(()=>{})//返回一个pedding状态的promise对象，中断promise链
    }).then(
        value => {
            console.log("onResolved4", value)
        },
        reason => {
            console.log("onRejected2()", reason)
        }
    )

async与await

　　async函数

　　　　一、函数的返回值为promise对象

　　　　二、promise对象的结果由async函数执行的返回值决定

// async函数的返回值是一个promise对象
    //asyn函数返回的promise的结果由函数执行的结果决定
    async function fn1(){
        //return 1
        throw 2
    }
    const res = fn1()
    console.log(res)
    res.then(
        value =>{
            console.log("onResolved", value)
        },
        reason => {
            console.log("onRejected",reason)
        }
    )

　　await表达式

　　　　一、await右侧的表达式通常为promise对象，但也能够是其余的值 

 　　　　二、若是表达式是promise对象，await返回的是promise成功的值

　　　　三、若是表达式是其余值，直接将此值做为await的返回值

function fn2(){
        return Promise.resolve(2)
    }
    async function fn3(){
        //const value = await fn2() // await右侧表达式为promise，获得的结果就是promise成功的value
        const value = await 6 //await右侧表达式不是Promis，获得的结果就是它本省
        console.log("value:",value)
    }
    fn3()

　　注意：

　　　　await必须写在async函数中，可是async函数中能够没有await

　　　　若是await的promise失败了，就会抛出异常，须要经过try...catch来捕获处理

 JS异步之宏队列与微队列

　　一、JS中用来存储执行回调函数的队列包含2个不一样特定的队列

　　二、宏队列：用来保存带执行的宏任务，好比：定时器回调，DOM事件回调，ajax回调

　　三、微队列：用来保存待执行的微任务，好比：promise的回调，MutationObserver的回调

　　四、JS执行时会区别这2两个队列

　　　　一、JS引擎首先必须先执行全部的初始化同步任务代码

　　　　二、每次准备取出第一个宏任务前，都要讲全部的微任务一个一个取出来执行