Promise两个链式的执行顺序

5. Promise

• Promise是解决异步编程的方案，也是一个构造函数，自身有reject、resolve这几个方法，原型上有then、catch等方法，new Promise（实例化Promise）结合原型链上的then、catch方法可以获取异步操作的信息

  • then() ----当Promise中的状态从pending变为fulfilled的时候，then()就能捕获到resolve和reject的回调

• catch() ----是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的

• Promise.then链式结构

• 如果有多个链式结构那么执行的顺序又是怎么样的呢？

   // Promise 是异步函数的解决方案，
    let p = new Promise((resolve, reject) => {
  
      setTimeout(() => resolve(1), 2000);
  
    })
    // 链式一
    p.then((result) => {
      console.log(1);
    }).then((result) => {
      console.log(2);
    }).then((result) => {
      console.log(3);
    })
    // 链式二
    p.then((result) => {
      console.log(4);
    }).then((result) => {
      console.log(5);
    }).then((result) => {
      console.log(6);
    })
    // 打印的结果是1,4,2,5,3,6
  

  • 因为Promise.then()里面的回调函数是异步任务(微任务)，代码在执行的过程中会先将异步任务放到任务队列中
  • 这个时候任务队列就有任务一(链式一p.then()),任务二(链式二p.then())
  • 同步代码执行完毕之后，会去任务队列中获取异步任务，这个时候先获取任务一的回调函数执行，返回一个Promise对象，Promise.then()中的回调函数又是微任务，这个时候会将微任务放到任务队列中，称为任务三
  • 这个时候任务队列只有任务二(链式二p.then()),任务三(链式一p.then())
  • 异步任务一执行完毕之后，调用栈会去任务队列中获取任务二的回调函数执行，返回的又是一个Promise对象，Promise.then()中的回调函数又是微任务，这个时候会将微任务放到任务队列中，称为任务四
  • 这个时候任务队列只有任务三(链式一p.then()),任务四(链式二p.then())
  • 这样循环下去就形成了两个Promise链式一上一下执行的现象