promise

129 阅读3分钟

转载自 promise

第一段代码

new Promise((resolve, reject) => {
    console.log("log: 外部promise");
    resolve();
})
.then(() => {
    console.log("log: 外部第一个then");
    return new Promise((resolve, reject) => {
        console.log("log: 内部第一个promise")
        resolve();
    })
    .then(() => {
        console.log("log: 内部第一个then");
    })
    .then(() => {
        console.log("log: 内部第二个then");
    })
    
})
.then(() => {
    console.log("log: 外部的第二个then");
})

// 外部promise
// 外部第一个then
// 内部第一个promise
// 内部第一个then
// 外部第二个then
// 内部第二个then

外部第一个new Promise执行,执行 resolve, 执行外部第一个then。 外部第一个then方法里面return 一个promise,这个return, 代表外部第二个then执行需要等待return之后的结果。 当然会先执行完内部的两个then之后,再执行外部的第二个then。

第二段代码

new Promise((resolve, reject) => {
  console.log("外部promise");
  resolve();
})
  .then(() => {
    console.log("外部第一个then");
    new Promise((resolve, reject) => {
      console.log("内部promise");
      resolve();
    })
      .then(() => {
        console.log("内部第一个then");
      })
      .then(() => {
        console.log("内部第二个then");
      });
  })
  .then(() => {
    console.log("外部第二个then");
  });
  // 外部promise
  // 外部第一个then
  // 内部promise
  // 内部第一个then
  // 外部第二个then
  // 内部第二个then

先注册先执行。

链式的 第二个then的注册,需要等待第一个then的同步代码执行完成。

第三段代码

new Promise((resolve, reject) => {
    console.log("外部promise");
    resolve();
})
.then(() => {
    console.log("外部第一个then");
    let p = new Promise((resolve, reject) => {
        console.log("内部promise");
        resolve();
    });
    p.then(() => {
        console.log("内部第一个then");
    });
    p.then(() => {
        console.log("内部第二个then");
    })
})
.then(() => {
    console.log("外部第二个then");
})

不是链式调用。

两种方式最主要的区别就是:

  • 链式调用的注册是前后依赖的, 比如说上面的外部的第二个then的注册,是需要外部第一个then的同步执行完成。
  • 变量定义的方式,注册都是同步的, 比如这里的p.then和var p = new Promise()都是同步执行完成的。

第四段代码

let p = new Promise((resolve, reject) => {
    console.log(外部promise);
});
p.then(() => {
    console.log("外部第一个then");
    new Promise((resolve, reject) => {
        console.log("内部promise");
        resolve();
    })
    .then(() => {
        console.log("内部第一个then");
    })
    .then(() => {
        console.log("内部第二个then");
    })
});
p.then(() => {
    console.log("外部第二个then");
})

外部的注册采用了非链式调用的写法, 外部的代码的p.then是并列同步注册的,所以代码在内部的new Promise执行完,p.then就都同步注册完了。

内部第一个then注册之后,就开始执行外部的第二个then了。

第五段代码


new Promise((resolve, reject) => {
    console.log("外部promise");
    resolve();
})
.then(() => {
    console.log("外部第一个then");
    new Promise((resolve, reject) => {
        console.log("内部promise");
        resolve();
    })
    .then(() => {
        console.log("内部第一个then");
    })
    .then(() => {
        console.log("内部第二个then");
    })
    
    return new Promise((resolve, reject) => {
        console.log("内部promise2");
        resolve();
    })
    .then(() => {
        console.log("内部第一个then2");
      })
      .then(() => {
        console.log("内部第二个then2");
      });
})
.then(() => {
    console.log("外部第二个then");
});

Promise/A+和webkit的Promise的实现差异

Promise的then的执行,是依赖于上一个then的执行完成之后,即resolve状态之后,才开始注册到微服务队列中的。

new Promise((resolve, reject) => {
    console.log("外部promise");
    resolve();
})
.then(() => {
    console.log("外部第一个then");
    new Promise((resolve, reject) => {
        console.log("内部promise");
        resolve();
    })
    .then(() => {
        console.log("内部第一个then");
        return Promise.resolve();
    })
    .then(() => {
        console.log("内部第二个then");
    })
})
 .then(() => {
    console.log('外部第二个then');
  })
  .then(() => {
    console.log('外部第三个then');
  })

Promise/A+的实现:

执行return Promise.resolve(),创建一个Promise实例,将Promise实例设置为resolve状态,这个Promise.resolve()是同步的,切该Promise已经完成了,所以它不回影响其他then的注册。 如下是Promise.resolve的实现:

    Promise.resolve = function (value) {
        if (value istanceof Promise) return value;
        
        if(value === null) return NULL;
        if(value === undefined) return UNDEFINED;
        if (value === true) return TRUE;
        if (value === false) return FALSE;
        if (value === 0) return ZERO;
        if (value === '') return EMPTYSTRING;
        if (typeof value === 'object' || typeof value === 'function') {
            try {
                var then = value.then;
                if (typeof then === 'function') {
                    return new Promise(then.bind(value));
                }
            } catch (ex) {
                return new Promise(function(resolve, reject) {
                    reject(ex);
                })
            }
        }
        return valuePromise(value);
    }

promise的webkit实现: