Promise 专项练习题（含详细接地气答案解析）

Promise专项练习题（含详细接地气答案解析）整套试题分为：基础题、执行顺序题、链式调用题、进阶面试题、手写题，循序渐进，所有答案贴合JS真实运行机制，解析通俗易懂，无模板化话术。一、基础概念题（判断题/简答题）1.判断题（正确/错误）（1）Promise一旦状态改变，就不会再发生变化。（2）Promise有三种状态：pending、resolved、rejected，默认初始状态是resolved。（3）Promise的then方法只会在状态为resolved时执行，catch只会在rejected时执行。（4）newPromise()内部的回调函数是异步执行的。2.简答题简述Promise解决了原生JS什么问题？回调地狱的弊端是什么？二、代码输出顺序题（高频面试）写出每段代码的最终打印结果和执行顺序题1：基础宏微任务顺序PlainText

console.log(1)

newPromise(resolve=>{

console.log(2)

resolve()

console.log(3)

}).then(()=>{

console.log(4)

})

console.log(5)题2：多个Promise微任务队列PlainText

console.log('start')

Promise.resolve().then(()=>{

console.log('promise1')

})

Promise.resolve().then(()=>{

console.log('promise2')

})

console.log('end')题3：嵌套Promise执行顺序PlainText

console.log(1)

newPromise(resolve=>{

console.log(2)

resolve()

}).then(()=>{

console.log(3)

newPromise(resolve=>{

console.log(4)

resolve()

}).then(()=>{

console.log(5)

})

}).then(()=>{

console.log(6)

})

console.log(7)题4：Promise失败捕获PlainText

newPromise((resolve,reject)=>{

reject('出错了')

}).then(res=>{

console.log('成功',res)

}).catch(err=>{

console.log('捕获错误',err)

}).then(()=>{

console.log('走完catch后的then')

})三、链式调用进阶题题1：then返回值规则PlainText

Promise.resolve(10)

.then(res=>{

console.log(res)

return20

})

.then(res=>{

console.log(res)

returnPromise.resolve(30)

})

.then(console.log)题2：链式报错穿透PlainText

Promise.resolve()

.then(()=>{

console.log(1)

thrownewError('手动报错')

})

.then(()=>{

console.log(2)

})

.catch(err=>{

console.log(err.message)

})

.then(()=>{

console.log(3)

})四、Promise静态方法面试题题1：Promise.all输出PlainText

constp1=Promise.resolve(1)

constp2=Promise.resolve(2)

constp3=Promise.reject('失败')

Promise.all([p1,p2]).then(res=>console.log(res))

Promise.all([p1,p3]).catch(err=>console.log(err))题2：Promise.race输出PlainText

constp1=newPromise(resolve=>setTimeout(()=>resolve('p1'),200))

constp2=newPromise(resolve=>setTimeout(()=>resolve('p2'),100))

Promise.race([p1,p2]).then(res=>console.log(res))五、手写代码题（核心必刷）1.手写简易版Promise.then链式调用核心逻辑2.手写Promise.all方法3.利用Promise封装一个延时函数sleep(时间)完整答案+详细解析一、基础概念题答案1.判断题（1）正确解析：Promise状态一旦从pending变为resolved/rejected，会永久凝固，无法二次修改。（2）错误解析：初始默认状态是pending（进行中），只有执行resolve/reject才会改变状态。（3）正确解析：then只接收成功态，catch专门捕获失败态，pending状态不会触发任何回调。（4）错误解析：newPromise的执行器回调是同步立即执行的，只有then/catch回调是异步微任务。2.简答题答案Promise主要解决了JS中回调地狱的问题。回调地狱弊端：多个异步操作嵌套时，代码层层嵌套、横向缩进越来越多，可读性极差、维护困难、无法统一捕获错误、无法直接返回异步结果。Promise通过链式调用扁平化异步代码，统一异步状态管理，支持错误冒泡捕获，彻底优化了异步代码结构。二、代码输出顺序题答案题1输出结果：12354解析：1.同步打印1；2.进入Promise执行器（同步），打印2，执行resolve改变状态，then回调进入微任务队列；3.继续同步执行打印3；4.同步代码走完，打印5；5.所有同步代码执行完毕，清空微任务队列，打印4。题2输出结果：startendpromise1promise2解析：同步代码优先执行，先打印start、end；两个Promise.resolve的then回调属于微任务，按书写顺序依次执行。题3输出结果：1273456解析：1.同步打印1、2，外层Promise状态变更，第一个then入微任务；2.同步打印7，同步代码结束；3.执行微任务：打印3，进入内层Promise，同步打印4，内层then入微任务；4.当前外层then逻辑走完，执行内层微任务打印5；5.最后执行外层第二个then，打印6。题4输出结果：捕获错误出错了、走完catch后的then解析：Promise触发reject，跳过第一个then，被catch捕获；catch执行完毕后，Promise状态会变回成功态，所以后续的then可以正常执行。三、链式调用进阶题答案题1输出：10、20、30解析：1.初始传入10，第一个then接收并打印；2.then中返回普通值，会自动包装为成功Promise，传给下一个then；3.返回Promise对象，等待其状态变更后，将结果传给最后一个then。题2输出：1、手动报错、3解析：1.第一个then打印1，手动抛出错误，后续同级then直接跳过；2.错误被最近的catch捕获，打印错误信息；3.catch执行后状态重置为成功，最后一个then正常执行打印3。四、Promise静态方法题答案题1输出：[1,2]、失败解析：Promise.all特性：全部成功才返回结果数组，任意一个失败直接全盘失败。第一个all两个Promise都成功，返回有序结果数组；第二个all包含失败Promise，直接触发catch。题2输出：p2解析：Promise.race特性：竞速机制，谁先完成就返回谁的结果。p2延时更短，优先执行完成。五、手写题标准答案（可直接运行）1.封装sleep延时函数PlainText

//延时多少毫秒，就等待多久后执行

functionsleep(time){

returnnewPromise(resolve=>{

setTimeout(resolve,time)

})

}

//测试

sleep(1000).then(()=>{

console.log('等待1秒后执行')

})2.手写Promise.allPlainText

functionmyAll(promiseArr){

//返回一个新Promise

returnnewPromise((resolve,reject)=>{

letresult=[]

letcount=0

constlen=promiseArr.length

//空数组直接返回空

if(len===0){

resolve([])

return

}

promiseArr.forEach((item,index)=>{

//统一转为Promise对象（兼容普通值）

Promise.resolve(item).then(res=>{

result[index]=res

count++

//所有Promise执行完毕，返回结果

if(count===len){

resolve(result)

}

}).catch(err=>{

//任意一个失败，直接失败

reject(err)

})

})

})

}

//测试

myAll([Promise.resolve(1),Promise.resolve(2)]).then(console.log)3.简易版Promise核心（含then链式）PlainText

classMyPromise{

constructor(executor){

//初始状态

this.status='pending'

this.value=undefined

this.reason=undefined

//存储回调（适配异步场景）

this.onResolveCb=[]

this.onRejectCb=[]

constresolve=(val)=>{

if(this.status==='pending'){

this.status='resolved'

this.value=val

//执行所有成功回调

this.onResolveCb.forEach(fn=>fn())

}

}

constreject=(err)=>{

if(this.status==='pending'){

this.status='rejected'

this.reason=err

//执行所有失败回调

this.onRejectCb.forEach(fn=>fn())

}

}

//执行器报错直接走失败

try{

executor(resolve,reject)

}catch(err){

reject(err)

}

}

then(onResolve,onReject){

//链式调用：返回新的Promise

returnnewMyPromise((resolve,reject)=>{

//成功态

if(this.status==='resolved'){

try{

letres=onResolve(this.value)

resolve(res)

}catch(err){

reject(err)

}

}

//失败态

if(this.status==='rejected