Promise全家桶自己总结的promise 的使用 Promise 语法api async函数和 await函 宏队列 、微队列 16、promise面试题 promise经典 面试题

  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); 



###  最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。



我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。