promise经典面试题汇总

Promise的回调函数不是正常的异步任务，而是微任务（microtask）。区别在于，正常异步任务追加到下一轮事件循环，微任务追加到本轮事件循环。js中的代码执行顺序为：同步程序——promise微任务——异步程序。

//例子1:
let promise = new Promise(function(resolve,reject){
    console.log('Promise');
    resolve();
});
promise.then(function(){
    console.log('resolved');
});
console.log('Hi!');  //Promise  Hi!  resolved

例子2：
setTimeout(function() { 
    console.log(1) 
}, 0); 
new Promise(function executor(resolve) { 
    console.log(2); 
    for( var i=0 ; i<10000 ; i++ ) { 
        i == 9999 && resolve(); 
    } 
    console.log(3); 
}).then(function() { 
    console.log(4); 
}); 
console.log(5);  //2  3  5  4  1
// Promise的回调函数不是正常的异步任务，而是微任务（microtask）。区别在于，正常异步任务追加到
//下一轮事件循环，微任务追加到本轮事件循环。这意味着，微任务的执行时间一定早于正常异步任务。then的
//回调函数的执行时间，早于setTimeout(fn, 0)。因为then是本轮事件循环执行，setTimeout(fn, 0)在
//下一轮事件循环开始时执行

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

//例子4:
const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
    	resolve('success')
    }, 1000)
})
const promise2 = promise1.then(() => {   
//上面 promise2 并不是 promise1，而是返回的一个新的 Promise 实例
    throw new Error('error!!!')  
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {
    console.log('promise1', promise1)
    console.log('promise2', promise2)
}, 2000)
//promise1  Promise {<pending>}       
//promise2  Promise {<pending>}
// Uncaught (in promise) Error: error!!!  at promise1.then (<anonymous>:7:8)
//promise1  Promise {<resolved>: "success"}       
//promise2  Promise {<rejected>: Error: error!!!  at promise1.then (<anonymous>:7:8)}

//例子5:
const promise = new Promise((resolve, reject) => {
    resolve('success1')
    reject('error')
    resolve('success2')
})
promise
.then((res) => {
    console.log('then: ', res)
})
.catch((err) => {
    console.log('catch: ', err)
})   //then:success1

//例子6:
Promise.resolve(1)
.then((res) => {
    console.log(res)
    return 2;
})
.catch((err) => {
    return 3;
})
.then((res) => {
    console.log(res);
})  //1 2
//promise 每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用

//例子7:
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('once')
        resolve('success')
    }, 1000)
})
const start = Date.now();
promise.then((res) => {
    console.log(res, Date.now() - start)
})
promise.then((res) => {
    console.log(res, Date.now() - start)
})
//once 
//promise 的 .then 或者 .catch 可以被调用多次，但这里 Promise 构造函数只执行一次，或者说 promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值
//success  991
//success  991（时间不定）

//例子8:
Promise.resolve()
.then(() => {
    return new Error('error!!!')
})
.then((res) => {
    console.log('then: ', res)
})
.catch((err) => {
    console.log('catch: ', err)
})
// then:  Error: error!!! at Promise.resolve.then (<anonymous>:3:8)
// .then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获，需要改成其中一种：
//return Promise.reject(new Error('error!!!'))  ||  throw new Error('error!!!')
//因为返回任意一个非 promise 的值都会被包裹成 promise 对象，即 return new Error(‘error!!!’) 等价于 return Promise.resolve(new Error(‘error!!!’))

//例子9:
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)   //1
//.then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透

promise经典面试题汇总

猜你喜欢