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

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。

},

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回调

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。