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

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