JS - Promise的各种面试问题及分析

一、简单的链式调用

1.1

new Promise((resolve, reject) => {
  console.log('promise1')
})
console.log('1', promise1);

promise1
1

根据代码块执行顺序输出

1.2

new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
  console.log(2);
}).then(() => {
  console.log(3);
});
console.log(4);

1 2 4 3

then会放入微任务队列

1.3

const promise = new Promise((resolve, reject) => {
  console.log(1);
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

1 2 4

promise.then 只有在被改变了状态之后才会执行。

二、Promise结合setTimeout

2.1

setTimeout(() => {
  console.log('1')
})
Promise.resolve().then(() => {
  console.log('2')
})
console.log('3')

3 2 1

依次是 宏任务、微任务、同步任务

三、Promise中的 catch

3.1

new Promise((resolve, reject) => {
   reject("error");
   resolve("success2");
}).then(res => {
   console.log("then1: ", res);
}).then(res => {
   console.log("then2: ", res);
}).catch(err => {
   console.log("catch: ", err);
}).then(res => {
   console.log("then3: ", res);
})

"catch: " "error"
"then3: " undefined

Promise 只改变一次状态，then 只会在 resolve 状态下执行， reject 状态不执行，catch 会返回一个 resolve 状态的 Promise。

3.2

Promise.resolve().then(() => {
  return new Error('error!!!')
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})

"then: " "Error: error!!!"

返回任意一个非 promise 的值都会被包裹成 promise 对象，因此这里的return new Error(‘error!!!’)也被包裹成了return Promise.resolve(new Error(‘error!!!’))。

3.3

Promise.resolve().then(() => {
  throw new Error('error!!!')
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})

"catch: " "Error: error!!!"

如果是 throw 那就会被后面的catch()给捕获。

四、Promise中then的交替执行

4.1

Promise.resolve().then(() => {
  console.log(0)
}).then(() =>{
  console.log(2)
}).then(() =>{
  console.log(4)
}).then(() =>{
  console.log(6)
})
Promise.resolve().then(() => {
  console.log(1)
}).then(() => {
  console.log(3)
}).then(() => {
  console.log(5)
})

0,1,2,3,4,5,6

如果有多个 fulfilled 状态的平行的 promise 实例，同时执行 then 链式调用，then 会交替调用，这是编译器的优化，防止一个 promise 持续占据事件

4.2

new Promise(resolve=>{
    resolve();
}).then(()=>{
    console.log('1');
     new Promise(resolve=>{
            resolve();
    }).then(()=>{
        console.log('2');
    }).then(()=>{
        console.log('4');
    })
}).then(()=>{
    console.log('3');
})

1,2,3,4

Promise 在then内部也是交替执行。

4.3

Promise.resolve().then(() => {
    console.log(0)
    return Promise.resolve(4)
}).then((res) => {
    console.log(res)
})
Promise.resolve().then(() => {
    console.log(1)
}).then(() => {
    console.log(2)
}).then(() => {
    console.log(3)
}).then(() => {
    console.log(5)
}).then(() =>{
    console.log(6)
})

内部 Promise前加个return 会出现 慢两拍的效果，具体表现为等待两个.then()执行完成。

0,1,2,3,4,5,6

五、Promise.rosolve 参数

let thenable = {
  then: () =>  {
    console.log(42)
  }
};

let obj = {
	test: "test"
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

let p2 = Promise.resolve(test);
p1.then(function(value) {
  console.log(value);  // { test: 'test' }
});

---

参考链接：

45道Promise面试题
并行promise的then交替执行