Promise.resolve()传入thenable对象

Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。如果这个值是一个 promise ，那么将返回这个 promise ；如果这个值是thenable（即带有"then" 方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态；否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。

这里有个小坑，这个静态方法可以传入一个thenable对象，resolve方法会直接调用thenable对象里面的then。

// Resolve一个thenable对象
var p1 = Promise.resolve({
  then: function(onFulfill, onReject) { onFulfill("fulfilled!"); }
});
console.log(p1 instanceof Promise) // true, 这是一个Promise对象

p1.then(function(v) {
    console.log(v); // 输出"fulfilled!"
  }, function(e) {
    // 不会被调用
});

// Thenable在callback之前抛出异常
// Promise rejects
var thenable = { then: function(resolve) {
  throw new TypeError("Throwing");
  resolve("Resolving");
}};

var p2 = Promise.resolve(thenable);
p2.then(function(v) {
  // 不会被调用
}, function(e) {
  console.log(e); // TypeError: Throwing
});

// Thenable在callback之后抛出异常
// Promise resolves
var thenable = { then: function(resolve) {
  resolve("Resolving");
  throw new TypeError("Throwing");
}};

var p3 = Promise.resolve(thenable);
p3.then(function(v) {
  console.log(v); // 输出"Resolving"
}, function(e) {
  // 不会被调用
});

 

这里再加一道Promise.resolve（）.then（）相关的一道输出题

Promise.resolve().then(function(){
  console.log('p1');
  setTimeout(()=>{
    console.log('s2');
  },0)
})

setTimeout(()=>{
  console.log('s1');
  Promise.resolve().then(function(){
    console.log('p2');
  })
},0)

 

答案

p1
s1
p2
s2

首先第一个Promise.resolve().then()的回调函数加入callStack和计时器回调加入webAPIs

然后执行这个promise的微任务先输出p1然后又碰到了一个计时器，后加入webAPIs

所以现在先执行s1然后又碰到了一个微任务p2，这个时候先执行微任务，再最后执行最后的计时器的宏任务s2

所以顺序是p1,s1,p2,s2。