1、Promise是异步编程的一种解决方案。是ES6中出现的一个构造函数,是为了解决回调地狱:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给一个结果。Promise有三种状态:pending(等待态)、fulfiled(成功态)、rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
promise是用来解决两个问题的:1>回调地狱,代码难以维护,尝尝第一个的函数的输出是第二个函数的输入这种现象。2>promise可以支持多个并发的请求,获取并发请求中的数据。这个promise可以解决异步的问题,本身不能说promise是异步的
2、Promise是一个构造函数
Promise语法
=> 语法: const 变量名 = new Promise(function (参数) {你的异步代码})
=> 返回值: 是一个实例 也是一个对象
=> 参数: 这里接收两个参数 是两个状态转换函数(resolve、reject)
-> 第一个: 就是当我们调用的时候Promise的状态会从持续转换成功
-> 第二个: 就是当我们调用的时候Promise的状态会从持续转换失败
Promise的三个状态
=> 持续状态: pending
=> 成功状态: fulfilled
=> 失败状态: rejected
=> 注意:
-> Promise的状态转换只能转换一次
-> 要不就是从 持续到成功
-> 要不就是从 持续到失败
两个常用的方法
=> 这两个方法是实例上的方法
-> then(函数): 当成功的时候调用then() 方法中的函数
-> catch(函数): 当失败的时候调用catch() 方法中的函数
Promise是一个构造函数,自己身上有all、reject、resolve这几个常用的方法,原型上有then、catch等常用方法
3、async和await
是两个关键字,async是异步的意思,await是等待的意思,把async和await解决回调地狱叫做终极解决回调地狱
async:书写在函数的前面,就是把这个函数变成异步函数,就是将来为了使用await。
注意:只是叫做异步函数,不改变函数的性质
之前是同步的函数依旧是同步的函数
之前是异步的函数依旧是异步的函数
await:书写在带有async的函数中,await后面等待的必须是一个Promise对象,只有后面的Promise对象给结果才向后执行,没有结果就一直等待。
// async和await的简单使用
function help() {
const p = new Promise(function (resolve, reject) {
let time = Math.random() * 3000 + 2000
setTimeout(function () {
if(time < 4500) {
console.log(time);
resolve('买到了')
} else {
console.log(time);
reject('失败了')
}
}, time);
})
// 这里需要返回一个Promise对象
return p
}
async function fn() {
let res = await help()
console.log(res);
console.log('后续要执行的代码');
}
fn()
4、
// Promise实例上的方法:
then(function (res) {}) 方法: 是我们成功的时候调用里面的函数
catch(function (err) {}) 方法: 是我们失败的时候调用里面的函数
finally(function () {}) 方法: 是完成的时候执行里面的函数 成功和失败都是完成
// 构造函数身上的几个方法
=> all()
-> 作用: 可以同时触发多个Promise对象
-> 语法: Promise.all([Promise1, Promise2, Promise3])
-> 执行: 只有所有的Promise对象都返回成功才是成功 只要有一个失败就是失败了
=> race()
-> 作用: 可以同时触发多个Promise对象
-> 语法: Promise.race([Promise1, Promise2, Promise3])
-> 执行: 这个是按照速度来计算的 只有第一个完成就完成了
=> allSettled()
-> 作用: 可以同时触发多个Promise对象
-> 语法: Promise.allSettled([Promise1, Promise2, Promise3])
-> 执行: 会数组的形式返回结果 , 不管是成功还是失败
=> resolve()
-> 强制实行一个成功
=> reject()
-> 强制执行一个失败
5、事件轮询(Event loop)
宏任务:js整体代码块、定时器(setTimeout、setInterval)、XMLHttpRequest、I/O
微任务:promise.then()、
执行栈中执行的任务都是宏任务,在一次宏任务完成后,会检查微任务队列有没有需要执行的任务,有的话按顺序执行微任务队列中所有的任务,之后再开始执行下一次宏任务。
宏任务队列、微任务队列(队列都是先进先出的)
调用栈、队列
宏任务开始,执行完一个宏任务,询问一次微任务队列,微任务队列有任务,就清空微任务队列,循环往复