多个promise调用顺序,javascript引擎的微任务和队列任务,promise(三)

发布时间:2024年01月15日

多个异步函数的调用顺序:运行代码得到的结果是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在单页运用中,配合请求接口,渲染数据很有作用。
后续再结合单页出几个案例
请大家持续关注哦~

文章来源:https://blog.csdn.net/tangxiaobao2016/article/details/135605949
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。