【面试题】Promise只会概念远远不够，还需这17道题目巩固！-阿里云开发者社区

前端面试题库（面试必备）推荐：★★★★★

在学习Promise相关题目之前，我们先做一些知识的回顾：JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。JS执行机制中有同步任务和异步任务，执行入队优先级是前者；异步任务又分为宏任务和微任务，执行入队优先级是后者。我们先看一下下面例子来充分理解一下JavaScript执行机制：（如代码所示。如图所示）

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

同步任务：只有前一个任务执行完毕，才能执行后一个任务。还记得大学饭堂排队打饭例子吗，作为一个优秀的当代大学生，排队打饭遵循先来先打后来排队原则，只有前面那一个同学打完饭，你才能打。当然，你插队就另说😜。
异步任务：由JavaScript 委托给宿主环境进行执行。当异步任务执行完成后，会通知JavaScript 主线程执行异步任务的回调函数。还记得铁板烧吗，说实际的，铁板烧确实不错，细心的你有没有发现，老板里有多个锅，不可能只有一个锅，每一份铁板烧都需要时间，不然让顾客等待得花儿都谢了，你下次也不会来了，所以多个锅就代表多个任务，不需要等待一个锅烧完才去重新烧，也就是说不需要等待当前任务结束（这个任务没有那么快完成，未来某个时间点才结束，它就是异步任务），为节省时间或能耗，可以继续去执行其他任务。
宏任务：JavaScript自身发起。如setTimeout 、setInterval MessageChannel I/O、setImmediate（Node环境）、script（整体代码块）
微任务：是由宿主（浏览器、Node）发起的。MutationObserver（浏览器环境）、promise.[ then/catch/finally ]、事件队列 process.nextTick（Node环境）
Promise：异步编程的一种解决方案，可以通俗把它当作一个容器，内部存储着某个未来才会结束的事件（通常是一个异步操作）的结果，从语法上来讲它就是一个对象，有两个特点：

有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）

对象状态不受外界影响。
状态一旦改变就不会在变，也就是说任何时候Promise都只有一种状态。

话不多说，我们直接上题目实操吧，一步步理解！

题目1️⃣：Promise没有resolve前都是同步任务。 Promise是微任务，但是Promise构造器内有同步任务，js线程会先把同步任务执行完，再去执行resolve回调。

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

题目2️⃣：当函数返回的是一个Promise实例。

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

题目3️⃣：宏任务与微任务执行顺序。定时器是宏任务，Promise是微任务，其他都是同步任务，

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

题目4️⃣：当微任务中嵌套宏任务、宏任务嵌套微任务、宏任务嵌套宏任务、微任务嵌套微任务时。

当微任务中嵌套宏任务时：由于构造器中除了resolve执行回调之外，还有其他同步任务、宏任务。

// 当微任务中嵌套宏任务
const promise = new Promise((resolve, reject) => {
    console.log(1);
    setTimeout(() => {
        console.log(2);
        resolve(3);
        console.log(4);
    }, 0);
    console.log(5);
});
promise.then((res) => {
    console.log(res);
});
console.log(6);
// 1 5 6 2 4 3

当宏任务嵌套宏任务时：当发生嵌套任务时，优先处理同层级，因为程序是自上而下的，setTimeout是异步任务中的宏任务，同层级的比嵌套的先入队，所以先执行同层级。

// 宏任务嵌套宏任务
setTimeout(() => {
    console.log(1);
    setTimeout(() => {
       console.log(2)
    }, 0)
}, 0)
setTimeout(() => {
    console.log(3)
}, 0)
console.log(4)
// 4 1 3 2

当宏任务嵌套微任务时：

 // 宏任务嵌套微任务
setTimeout(() => {
    console.log(1);
    // 微任务
    Promise.resolve().then(() => {
            console.log(2)
    })
}, 0)
setTimeout(() => {
     console.log(3)
}, 0)
console.log(4)
// 4 1 2 3

微任务嵌套微任务时：同层级微任务优先执行。因为任务队列先入队都是同级别的。

// 微任务链接微任务
Promise.resolve().then(() => {
        console.log(1)
        return 2;
}).then((res) => {
        console.log(res);
})
Promise.resolve().then(() => {
        console.log(3)
})
// 1 3 2
// 微任务嵌套微任务
Promise.resolve().then(() => {
        console.log(1)
        Promise.resolve().then(() => {
                console.log(2)
        })
        return 3
}).then((res) => {
        console.log(res);
})
Promise.resolve().then(() => {
        console.log(4)
})
// 1 4 2 3

题目5️⃣：结合微任务和宏任务，灵活理解Promise三种状态。从代码中我们可以看出例子中的单纯是同步任务有2 3 4，而宏任务中的同步任务是1，当执行程序中同步任务时，微任务还没有resolve回调函数，所以promise对象都是pending状态，由于抛出错误是微任务中的宏任务，所以优先执行，然后再执行全局的setTimeout，最后promise1是fufilled状态，promise2是rejected状态。

const promise1 = new Promise((resolve, reject) => {
   setTimeout(() => {
           resolve("success");
           console.log(1);
   }, 1000);
   console.log(2);
});
const promise2 = promise1.then(() => {
       throw new Error("error!!!");
});
console.log(3, promise1);// pending
console.log(4, promise2);// pending
setTimeout(() => {
   console.log(5);
   console.log(6, promise1);// fufilled
   console.log(7, promise2);// rejected
}, 2000);
// 2 3 4 1 抛出error! 5 6 7

题目6️⃣：Promise中构造函数中的resolve或reject只有第一次执行有效。

const promise = new Promise((resolve, reject) => {
        reject("error");
        resolve(1);
});
promise.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

题目7️⃣：Promise对象中的catch无视链接位置，都能捕获上层未捕捉过的错误，then3会执行因为catch会返回一个Promise，且由于这个Promise没有返回值，所以打印出来的是undefined。

Promise.resolve(1)
.then(res => {
        console.log(res);
        return 2;
})
.catch(err => {
        return 3;
})
.then(res => {
        console.log(res);
});
// 1 2

题目8️⃣：Promise对象的链式调用的执行顺序。Promise可以链式调用，不过promise 每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用,return 2会被包装为resolve(2)。

Promise.reject('err!!!')
    .then((res) => {
            console.log('success', res)
    }, (err) => {
            console.log('error', err)
    }).catch(err => {
            console.log('catch', err)
    })
// error err!!!
Promise.resolve()
.then(() => {
  throw new Error('error!!!');
})
.then(
  function success(res) {},
  function fail1(err) {
    console.log('fail1', err);
  }
)
.catch(function fail2(err) {
  console.log('fail2', err);
});
// fail1 Error: error!!!

题目9️⃣：注意then的第二参数错误处理与catch的区别。，两个都是处理reject状态回调结果或者是抛出的错误，如果存在第二参数，也存在catch，捕获错误是参数生效，否则就会catch生效。也可以这样理解then的第一个参数是处理成功的函数，第二个参数是处理失败的函数。如果两个都没有就会直接报错。

Promise.reject('err!!!')
    .then((res) => {
            console.log('success', res)
    }, (err) => {
            console.log('error', err)
    }).catch(err => {
            console.log('catch', err)
    })
// error err!!!
Promise.resolve()
.then(() => {
  throw new Error('error!!!');
})
.then(
  function success(res) {},
  function fail1(err) {
    console.log('fail1', err);
  }
)
.catch(function fail2(err) {
  console.log('fail2', err);
});
// fail1 Error: error!!!

题目🔟：then参数是函数，对于非函数会出现值穿透。 如果then传入的是非函数，resolve会被传到是函数的地方。

Promise.resolve(1).then(2).then(Promise.resolve(3))
.then(console.log)
// 1

题目1️⃣1️⃣：finally方法也是一个微任务。：.finally()方法不管Promise对象最后的状态如何都会执行。.finally()方法的回调函数不接受任何的参数。

function promise1() {
        let p = new Promise((resolve) => {
                console.log(1);
                resolve(2)
        })
        return p;
}
function promise2() {
        return new Promise((resolve, reject) => {
                reject('error')
        })
}
promise1()
        .then(res => console.log(res))
        .catch(err => console.log(err))
        .finally(() => console.log('finally1'))
promise2()
        .then(res => console.log(res))
        .catch(err => console.log(err))
        .finally(() => console.log('finally2'))
// 1 2 error finally1 finally2

题目1️⃣2️⃣：async await执行机制：在async1中await后面的Promise是没有返回值的，也就是它的状态始终是pending状态，因此相当于一直在await，await，await却始终没有响应，所以就不能执行await后面的语句了。

async await宏任务：await强制的是当前async函数域，所以不能优先处理await后面的语句，全局同步任务可优先处理。

async function async1() {
        console.log(1);
        await async2();
        console.log(2);
}
async function async2() {
    setTimeout(() => {
       console.log(3)
    }, 0)
    console.log(4);
}
async1();
console.log(5)
// 1 4 5 2 3

async await微任务：

async function async1() {
    console.log(1);
    await new Promise(resolve => {
        console.log(2)
    })
    // Promise没有resolve所以一直处于pending
    console.log(3);
    return 'async1 end'
}
console.log(4)
async1().then(res => console.log(res))
console.log(5)
// 4 1 2 5

async await微任务、宏任务：

async function testSometing() {
        console.log(1);
        return 2;
}
async function testAsync() {
        console.log(3);
        return Promise.resolve(4);
}
async function test() {
        console.log(5);
        const v1 = await testSometing();
        console.log(v1);
        const v2 = await testAsync();
        console.log(v2);
        console.log(v1, v2);
}
test();
var promise = new Promise(resolve => {
        console.log(6);
        resolve(7);
});
promise.then(val => console.log(val));
console.log(8);
// 5 1 6 8 2 3 7 4
// 2 4

题目1️⃣3️⃣：理解Promise.all方法，all方需要等所有异步操作执行完后才执行回调，由于有reject状态的回调，所以没有执行then，直接执行了catch。

function runAsync(x) {
        const p = new Promise(r => setTimeout(() => r(x, console.log('runAsync', x)), 1000))
        return p
}
function runReject(x) {
        const p = new Promise((res, rej) => setTimeout(() => rej(`Error: ${x}`, console.log('runRejct', x)), 1000 * x))
        return p
}
Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)])
        .then(res => console.log('then:', res))
        .catch(err => console.log('catch:', err))
// runAsync 1
// runAsync 3
// runRejct 2
// catch: Error: 2
// runRejct 4

问题1️⃣4️⃣：理解Promise.race方法，race获取最快的哪一个异步操作的结果。由于下面执行了一个reject状态的回调，所以没有执行then，如果没有这个runReject(0)，下面例子打印的是1 result:1 2 3。

function runAsync(x) {
const p = new Promise(r =>
        setTimeout(() => r(x, console.log(x)), 1000)
);
return p;
}
function runReject(x) {
const p = new Promise((res, rej) =>
        setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x)
);
return p;
}
Promise.race([runReject(0), runAsync(1), runAsync(2), runAsync(3)])
.then(res => console.log("result: ", res))
.catch(err => console.log(err));
// 0 Error:0 1 2 3

问题1️⃣5️⃣： 构造函数里resolve之前的同步任务打印3 7优先执行，然后就是first后面的全局同步任务4，注意这里与上面的嵌套微任务的区别，因为这里直接resolve(2)的话first就会完成回调函数了，但是最外层构造函数内还有一个微任务p，所以先执行。

const first = () => (new Promise((resolve, reject) => {
        console.log(3);
        let p = new Promise((resolve, reject) => {
                console.log(7);
                setTimeout(() => {
                        console.log(5);
                        resolve(6);
                        console.log(p)
                }, 0)
                resolve(1);
        });
        resolve(2);
        p.then((arg) => {
                console.log(arg);
        });
}));
first().then((arg) => {
        console.log(arg);
});
console.log(4);
// 3 7 4 1 2 5 fulfilled:1

问题1️⃣6️⃣：综合Promise值穿透、宏任务、微任务、async await

const async1 = async () => {
    console.log(1);
    setTimeout(() => {
            console.log(2)
    }, 2000)
    await new Promise(resolve => {
            console.log(3)
    })
    console.log(4)
    return 5
}
console.log(6);
async1().then(res => console.log(res));
console.log(7);
Promise.resolve(8)
    .then(9)
    .then(Promise.resolve(10))
    .catch(11)
    .then(res => console.log(res))
setTimeout(() => {
    console.log(12)
}, 1000)
//6 1 3 7 8 12 2

问题1️⃣7️⃣： Promise的状态一旦改变就无法改变。.finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值。由于微任务Promise中有宏任务，并且有多个resolve，但是Promise值只能回调一个函数，所以打印了3，.finally也是一个微任务并且不接收回调函数参数，所以为undefined，然后执行微任务Promise中宏任务，接着执行then中的宏任务，此时p1状态是undefined（没有then处理）。

const p1 = new Promise((resolve) => {
    setTimeout(() => {
            resolve(1);
            console.log(2)
    }, 0)
    resolve(3);
    resolve(4);
}).then(res => {
    console.log(res)// 打印3
    setTimeout(() => {
        console.log(p1)
    }, 1000)
}).finally(res => {
    console.log('finally:', res)
})
// 3 finally:undefined 2 fulfilled:undefined

✍总结：其实学完这17道题目，希望各位同仁有收获，对于Promise的执行有更深理解与掌握。接下来就总结一下如何快速处理这种题目的技巧（从上到下按顺序理解）：

🚩 先看是否同步任务：对于非函数，先看当前语句是否是同步任务，是就先执行；对于函数，不管是同步还是异步操作，也是先执行同步任务。
🚩 异步任务判断是宏任务还是为微任务：先执行微任务，后执行宏任务。
🚩 任务嵌套情况，灵活处理：不管是微任务还是宏任务，先处理同级别任务，但是对于微任务有些情况特殊需要灵活理解。
🚩 Promise特点要重视：

对象状态不受外界影响；状态一旦改变就不会再变。
then传参必须是函数，否则出现值穿透。
理解catch处理与then第二个参数处理。
Promise如果没有resolve或reject，就会一直处于pending状态。
区分all方法与race方法。

🚩 理解async await：强制执行函数体内await当前语句完毕（也相当于一个微任务），才会执行函数体内await后面的语句。

前端面试题库（面试必备）推荐：★★★★★

地址：前端面试题库

表妹一键制作自己的五星红旗国庆头像，超好看

【面试题】Promise只会概念远远不够，还需这17道题目巩固！

前端面试题库（面试必备）推荐：★★★★★

前端面试题库（面试必备）推荐：★★★★★

热门文章

最新文章

相关课程

相关电子书

【面试题】Promise只会概念远远不够，还需这17道题目巩固！

前端面试题库 （面试必备） 推荐：★★★★★

前端面试题库 （面试必备） 推荐：★★★★★

热门文章

最新文章

相关课程

相关电子书

前端面试题库（面试必备）推荐：★★★★★

前端面试题库（面试必备）推荐：★★★★★