多个异步函数的调用顺序:运行代码得到的结果是p1,p2,p4,p3
const p1 = new Promise((resolve, reject) => reject(Error('p1抛出的错误'))).catch(error => console.log(error))
const p2 = new Promise((resolve, reject) => reject(Error('p2抛出的错误'))).catch(error => console.log(error))
const p3 = new Promise((resolve, reject) => resolve('xx')).then(() => {
throw Error('p3抛出的错误')
}).catch(error => console.log(error))
const p4 = new Promise((resolve, reject) => reject(Error('p4抛出的错误'))).catch(error => console.log(error))
解释:then()的回调用会产生新的期约,新的期约的函数不会立即运行,而是被放入微任务队列中,这意味着它会在稍后运行。在下一次事件循环的时候再次排队
以上的例子再复杂一点:运行代码得到的结果是p1,p4,p3,p2
const p1 = new Promise((resolve, reject) => reject(Error('p1抛出的错误'))).catch(error => console.log(error))
const p2 = new Promise((resolve, reject) => reject(Error('p2抛出的错误'))).then(error => error).then(error => error).catch(error => console.log(error))
const p3 = new Promise((resolve, reject) => resolve('xx')).then(() => {
throw Error('p3抛出的错误')
}).catch(error => console.log(error))
const p4 = new Promise((resolve, reject) => reject(Error('p4抛出的错误'))).catch(error => console.log(error))
3.promise结合setTimeout案例
const p1 = new Promise((resolve, reject) => {
console.log('1.这里是同步的代码,Promise里面按顺序调用')
resolve('接口返回数据')
})
.then((value) => {
console.log('then1', value)
return value
})
.then((value) => {
console.log('then2', value)
return value
})
.catch(error => console.log(error))
setTimeout(() => {
console.log('setTimeout是最后吗')
},0)
console.log('2.这里是同步的代码,程序流在外面')
// 1.这里是同步的代码,Promise里面按顺序调用
// 2.这里是同步的代码,程序流在外面
// then1 接口返回数据
// then2 接口返回数据
// setTimeout是最后吗
Promise 回调被处理为微任务,而 setTimeout() 回调被处理为任务队列。
其实setTimeout结合Promise在单页运用中,配合请求接口,渲染数据很有作用。
后续再结合单页出几个案例
请大家持续关注哦~