ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-10-02 21:02:12  阅读:97  来源: 互联网

标签:面试题 resolve console log value Promise promise


目录

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


Promise全家桶自己总结的 

1、 错误类型

     Error : 所有的错误的父类型

    ReferenceError:引用类型不正确的错误

    TypeError:数据类型不正确的错误

    RangeError:数据值不在其所允许的范围内

    SyntaxError:语法错误

 2、 错误处理

    捕获错误:try ... catch

    抛出错误 throw error

    捕获异常 错误处理

  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 封装Promise

标签:面试题,resolve,console,log,value,Promise,promise
来源: https://blog.csdn.net/qq_54753561/article/details/120588743

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有