  var num = 5
    function fn() {
        if (2 > num) {
            console.log('可以执行任务');
        } else {
            throw new Error('报错了信息')
        }
    }
    try {  // 抛出报错信息
        fn()
    } catch (error) {
        console.log(error);
    }

3、错误对象

message属性：错误信息相关 // stack 报错有信息和类型组合

stack属性：函数调用栈记录信息就是栈内存溢出报错，自己调用自己

SyntaxError 捕获语法错误了 var a = """ Uncaught SyntaxError: Invalid or unexpected token

4、promise 的状态改变了解Promise

promise 是es6提出的一种异步编程的解决方案

pending变成 resolved

pending 变成 rejected

resolve的作用是将promise从进行中的状态转化为已成功的状态

reject 的作用是将promise从进行中的状态转化为以失败的状态

promise 本质上是一个构造函数它有三个状态分别是进行中（pending）已成功（fullfilled）已失败（rejected）

说明：只有两种，且一个promise 对象只能改变一次

无论变成功还是失败，都只有一个结果成功的结果一般称为 value 失败的结果成为 reason

promise可以从进行中的状态转化为已成功的状态也可以从进行中的状态转化为以失败的状态

promise 不管是成功还是失败都已经运行结束了所以 promise不能从已成功的状态转为以失败的状态

也不能从已失败的状态转化为已成功的状态

promise构造函数接受一个函数作为参数该函数内部接受两个参数分别是resolve reject

5、promise 的使用

 const p = new Promise((resolve, reject) => {
        // new Promise 传入一个回调函数 固定的参数名字 有 resolve  reject
        console.log(1);  // 同步的代码先执行
        setTimeout(() => {
            console.log(3); // 异步的后执行
            if (5 > 2) {
                resolve('成功的回调')
            } else {
                reject('失败的回调')
            }
        }, 1000);
    })
    console.log(2);// 同步的代码先执行
    p.then(
        value => {
            console.log(value);// 这里的value上面成功的数据 是 resolve
        },
        reason => {
            console.log(reason);// 这里的reason上面成功的数据 是 reject
        }
    )

7、为什么要Promise

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

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

Promise ：启动异步任务 => 返回promise对象 => 给promise 对象绑定回调函数（甚至可以在异步任务结束后指定）

2、支持链式调用，可以解决回调地狱的问题

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

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

解决方案？promise 链式调用最好的 async / await

8、Promise 语法api

  const p = new Promise((resolve, reject) => {
        setTimeout(() => {
            // 这里只能有一个状态哦
            resolve('成功')
            reject('失败')
        }, 0);
    })
    p.then(
        value => {
            console.log(value);// 这里的value上面成功的数据 是 resolve
        },
        reason => {
            console.log(reason);// 这里的reason上面成功的数据 是 reject
        }
    )

// 简写

  const p = new Promise((resolve, reject) => {
        resolve('成功')
    })   //这种可以简写为下面那种
    p.then(
        value => {
            console.log(value);// 这里的value上面成功的数据 是 resolve
        },
        reason => {
            console.log(reason);// 这里的reason上面成功的数据 是 reject
        }
    ) //这种可以简写为下面那种

    const p = Promise.resolve('成功11') //简写的形式  语法糖
    const p1 = Promise.resolve('成功了22')
    const p2 = Promise.reject('失败了333')
    p.then((resolve) => { console.log(resolve) })
    p1.then((resolve) => { console.log(resolve) })
    p2.catch((reject) => { console.log(reject) })

// Promise.all
    Promise.all 可以把多个回调的结果给组合在一起
    const pAll = Promise.all([p, p1, p2])
    pAll.then(
        value => {
            console.log('on Resolve', value);
        },
        reason => {
            console.log('on Reject', reason);
        }
    )

// Promise.race

    Promise.race 谁先反回就是谁 第一个结果就是最终的的结果
    const pAll = Promise.race([p2, p, p1,])
    // 这里如果吧p2放到第一个执行就是失败放最后一个就是成功
    pAll.then(
        value => {
            console.log('on Resolve', value);
        },
        reason => {
            console.log('on Reject' + reason);
        }
    )

9、promise关键点抛出错误信息

   const p = new Promise((resolve, reject) => {
        throw new Error('有错误信息，请处理')
        //1、如何改变promise状态？  resolve、 reject 、或者 抛出错误信息或异常  Promise 变成reject状态
    })
    p.then(
        value => {
        },
        reason => {
            console.log('1---' + reason);// 是 错误信息
        }
    )
    p.then(
        value => {
        },
        reason => {
            console.log('2---' + reason);// 是 错误信息
        }
    ) //2、 一个promise 指定多个回调函数回调用吗？ 当promise 当promise 发生改变时对应的状态都会改变 全部打印

10、改变promise状态和执行回调谁先谁后的问题？下面代码。

1、什么时候得到数据

2、如果先指定的回调，那当状态放生改变，回调函数就会调用，得到数据

3、如果先改变的状态，那当指定回调函数就会调用

new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(1)//2、后改变状态(同时指定数据)，异步执行回调函数
        }, 1000);
    }).then(//1、先指定回调函数  保存当前指定的回掉函数
        value => {
        },
        reason => {
            console.log('失败' + reason);// 是 错误信息
        }
    )
    new Promise((resolve, reject) => {
        reject(1)//1、先改变状态(同时指定数据)，异步执行回调函数
    }).then(//2、后指定回调函数  异步执行回调函数
        value => {
        },
        reason => {
            console.log('失败' + reason);// 是 错误信息
        }
    )
    2、同步和异步代码
    new Promise((resolve, reject) => {
        reject(1)
    }).then( // .then 无论成功或失败都是异步的  // 同步的先执行，异步的后执行
        value => {
        },
        reason => {
            console.log('失败' + reason);
        }
    )
    console.log(2); // console.log(2)先执行。  console.log('失败' + reason)在输出就是异步的。

11、promise.then()返回的新promise的结果状态由什么决定？

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

2、详细表达：

如果抛出异常，新的promise 变成rejected reason为抛出的异常

如果返回的是非promise的任意值，新promise变成resolved ，value 为返回的值

如果返回的是另一个新promise，此promise的结果就会成为新的promise的结果

new Promise((resolve, reject) => {
        resolve(1)
        // reject(1)
    }).then( // then 是由promise 的结果来决定
        value => {
            console.log(value); //如果这里如果没有抛出异常那么就是相当于return 的一个undefined 
            // return 2  若果这里return了一个2  那么下面.then里的 value的就是2 不是undefined 
            // return Promise.resolve(2) // 下面.then里的 value就是2
            // return Promise.reject(2)  // 下面就执行失败的的回调 .then里的 reason //  2 
            // throw '抛出异常' //这里抛出异常
        },
        reason => {
            console.log('失败' + reason);
        }
    ).then(// 由上面执行的函数来决定
        value => {
            console.log(value); // undefined
        },
        reason => {
            console.log('失败---' + reason);
        }
    )

12、promise 如何串联多个异步操作任务 promise的then返回新promise，可以开启链式调用

1、可以通过then链式调用串联多个同步任务和异步任务

new Promise(resolve => {
        setTimeout(() => {
            resolve(1)
        }, 1000);
    }).then(value => {
        console.log(value);
        return 2
    }).then(value => {
        console.log(value);
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(3)
            }, 1000);
        })
    }).then(value => {
        console.log(value);
    })

13、promise异常传透 / 穿透？

当时用promise的then调用时，可以在最后指定失败的回调

当前面任何操作出了异常都会传到最后失败的回调处理

return new Promise(()=>{}) // 这了没结果下面也没结果 pending 中断promise 链

new Promise(resolve => {
        resolve(1)
    }).then(value => {
        console.log(value);
        return 2
        // reason => { throw reason }
    }).then(value => {
        console.log(value);
        return 3
        // reason => { throw reason }
    }).then(value => {
        console.log(value);
        // reason => { throw reason }
        //  7、 return new Promise(()=>{}) // 这了没结果下面也没结果  pending 中断promise 链
    }).catch((reason) => { //  传透错误是一层一层传的 promise怎么会失败  1、抛出异常 2、reject
        console.log(reason);
    })

14、async函数和 await函数

注意：

await必须写在async函数中，但async函数中可以没有await

如果await的promise失败了，就会抛出异常，需要通过try...catch来捕获处理

async 函数是一种异步编程的解决方案它是由promise封装来的

await 能够获取promise执行的结果 await必须和async一起使用才行

我们通常涉及的异步操作有 setInterval setTimeout ajax请求各种事件等等

1、async 函数

async 函数的返回值是一个promise对象

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

    async function fn() { // async 函数 的返回值是一个promise对象
        return
    }
    let a = fn()
    console.log(a);

2、await 表达式

await 右侧的表达式一般为promise 对象但也可以是其他的值

如果表达式是promise对象，await 返回的是promise成功的值

如果表达式是其他的值, 直接将此值作为await的返回值

    function fn() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve(123) // a
                reject('错误') // 1
            }, 1000);
        })
    }

    async function fn1() { // 如果这个函数用了await 必须要用 async
        // let fun = await fn() // b

        try {// 这是捕获错误的 2
            let fun = await fn()
        } catch (error) {
            console.log(error);
        }

        // console.log(fun);// c
        // 如果 表达式是promise对象，await 返回的是promise成功的值
    }
    fn1()



    function fn() {
        return 6666
    }
    async function fn1() { // 如果这个函数用了await 必须要用 async
        let fun = await fn()
        // 如果表达式是其他的值,直接将此值作为await的返回值
        console.log(fun);
    }
    fn1()

15、宏队列、微队列

宏队列 dom事件回调 ajax回调定时器回调

微队列 Promise回调 mutation回调

js执行时会区分这两个队列

js引擎首先必须执行所有初始化同步代码微队列执行完在执行宏队列

每次准备取出第一个宏任务执行之前，都要将所有的微任务一个一个取出来执行

下面有代码

  setTimeout(() => {
        // 加入宏队列
        console.log(1);
    });
    Promise.resolve(3).then((value) => {
        // 加入微队列
        console.log(value);
    })
    setTimeout(() => {
        console.log(5);
        Promise.resolve(6).then((value) => {
            // 加入微队列
            console.log(value);
        })
    });

    Promise.resolve(2).then((value) => {
        // 加入微队列
        console.log(value);
        setTimeout(() => {
            // 加入宏队列
            console.log(4);
        });
    })
    // 3 2 1 5 6 4 


     setTimeout(() => {
        console.log(1); 
    });
    new Promise((resolve) => {
        console.log(2); 
        resolve()
    }).then(() => {
        console.log(3); 
    }).then(value => {
        console.log(4);
    })
    console.log(5);  
    // 每次准备取出第一个宏任务执行之前，都要将所有的微任务一个一个取出来执行
    // 微队列[2 5 3 4]  宏队列[1]  25341

16、promise面试题 promise经典面试题

    setTimeout(() => {
        console.log(0);
    }, 0);
    new Promise((resolve, reject) => {
        console.log(1);
        resolve()
    }).then(() => {
        console.log(2);
        new Promise((resolve, reject) => {
            console.log(3);
            resolve()
        }).then(() => {
            console.log(4);
        }).then(() => {
            console.log(5);
        })
    }).then(() => {
        console.log(6);
    })
    new Promise((resolve, reject) => {
        console.log(7);
        resolve()
    }).then(() => {
        console.log(8);
    })
   // 1 7 2 3 8 4 6 5 0

码农公寓

Promise全家桶自己总结的

1、 错误类型

2、 错误处理

3、 错误对象

4、promise 的状态改变 了解Promise

5、promise 的使用

7、为什么要Promise

8、Promise 语法api

9、promise关键点 抛出错误信息

10、改变promise状态和执行回调谁先谁后的问题？下面代码。

11、promise.then()返回的新promise的结果状态由什么决定？

12、promise 如何串联多个异步操作任务 promise的then返回新promise，可以开启链式调用

13、promise异常传透 / 穿透？

14、async函数和 await函数

注意：

1、async 函数

2、await 表达式

15、宏队列 、微队列

16、promise面试题 promise经典 面试题

下章节有手写Promise 封装Promise

相关文章

1、错误类型

2、错误处理

3、错误对象

4、promise 的状态改变了解Promise

9、promise关键点抛出错误信息

15、宏队列、微队列

16、promise面试题 promise经典面试题