Promise.all([ .. ]) 接受一个或多个值的数组(比如,立即值、promise、thenable)。它返回一个promise。
如果所有的值都完成,这个promise 的结果是完成;
一旦它们中的某一个被拒绝,那么这个promise 就立即被拒绝。
Promise.all([p1, p2, p3])
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
Promise.allSettled()所有的Promise对象均出现结果(无论成功或失败)后才会执行allSettled中的then回调(只会进入then回调) 在所有 Promise 对象都 settle 后返回一个新的 Promise 对象,该对象的 Fulfill 状态的值是一个数组,包含每个 Promise 对象的 settle 状态信息(即不管 resolve 还是 reject 都会被处理)注意:若有错误抛出,则抛出错误信息,并终止函数
Promise.allSettled([p1, p2, p3])
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
Promise.race() 函数返回一个 Promise,它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成( resolves),也可以是失败(rejects),这要取决于第一个完成的方式是两个中的哪个。
Promise.race([p1, p2, p3])
.then((res) => {
console.log(res) //
})
.catch((err) => {
console.log(err)
})
Promise.any()所有的Promise对象均失败后才会执行any中的失败回调,否则当任意一个Promise对象成功就会直接进入then回调
Promise.any([p1, p2, p3])
.then((res) => {
console.log(res) //
})
.catch((err) => {
console.log(err)
})
async的概念
Async/Await 代码看起来简洁一些,使得异步代码看起来像同步代码
async function getInfo() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
getInfo().then(data => console.log(data));
async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise,那么它将会被隐式地包装在一个promise中。sync await是基于Promise实现的,不能用于普通的回调函数
function showInfo () {
return 'hello'
}
function queryData () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('nihao')
}, 2000)
})
}
async function getResult () {
let ret = await queryData()
return ret
async function testData () {
getResult().then(res => {
console.log(res)
})
}
testData()
JS事件循环(事件环、eventloop)
S代码执行机制JS是单线程,同一时间只能做一件事,为了避免耗时任务阻塞代码,JS通过事件循环来处理这种耗时任务(异步)
1 先同步 后异步2 异步分微任务(then,catch方法),宏任务(ajax、定时器、事件回调、script标签)
JS事件循环
1 先执行宏任务(解析script标签)
2 从上往下执行,遇到同步代码,立刻放入js调用栈执行
遇到宏任务放到宿主环境(浏览器),遇到微任务放入微任务队列
当宿主环境的时间到或事件触发,对应的回调进入宏任务队列
3 当JS调用栈空闲时,会清空微任务队列,然后在执行宏任务队列
console.log(1) // 同步
// 异步
setTimeout(() => {
console.log(2)
}, 100)
setTimeout(() => {
console.log(6)
}, 0)
setTimeout(() => {
console.log(8)
}, 200)
// then是异步
Promise.resolve(123).then(() => {
console.log(4)
})
Promise.resolve(123).then(() => {
console.log(9)
})
// 同步
console.log(3)