如何秒杀Promise面试题
如果你在面试的时候技术面给你出了点关于Promise的面试题首先不要慌,先问候他爹妈一套问候语!
然后切记不要(ps:这是病句别在意!🤣) 自己想 找他要纸和笔
首先关于promise的面试题无非就是 promise 的状态和宏队列、微队列
看一道题:(小试牛刀😀)
const promise = new Promise((resolve, reject) => {console.log(1);resolve(5);console.log(2);
});
promise.then(() => {console.log(3);
});
console.log(4);
// The output is 1, 2, 4, 3.
Remeber:在javascript中代码都是一行一行执行的 什么队列任务都是噱头
解析:
开始执行任务
第一步声明
第二步new Promise 传入回调函数 并且赋值 (传入的回调就直接执行了 输出1 promise状态为pending)
第三步resolve(5) promise状态为fulfilled
第四步 输出2
第五步 promise.then 当promise成功后请执行他的回调 但是注意 promise的then方法是要放入微队列的
第六步 不管队列 继续跑全局任务队列 输出4
第七步 执行微队列 输出3
所以答案是:1,2,4,3.
经过上面的学习我们知道
js首先执行全局任务 遇到then 放到微队列中 继续执行全局任务 当全局任务没有任务后 执行微队列!
看一道题:(小试牛刀😀)
const promise = new Promise((resolve, reject) => {console.log(1);setTimeout(() => {console.log(2);resolve();console.log(3);},1000);});promise.then(() => {console.log(4);});console.log(5);
解析:
new --> 输出1 --> setTimeout加入宏任务 --> 等待setTimeout执行到resolve then加入微队列 --> 输出5
注意 执行顺序 全局任务 --> 微任务 --> 宏任务 (当微任务没有可以执行的任务的时候才会先执行宏任务)
答案为:1,5,2,3,4
why?当执行到setTimeout加入宏任务 人家then还没加微任务呢 此刻微任务为空 咋不执行宏任务呢是不是!
经过上面的学习我们知道
执行顺序 全局任务 --> 微任务 --> 宏任务
看一道题:(小试牛刀😀)
setTimeout(() => {console.log(1);
}, 1000);
const promise = new Promise((resolve, reject) => {console.log(2);resolve();
});
promise.then(() => {console.log(3);
});
console.log(4);
解析:
setTimeout进入宏任务 --> new直接执行 输出2 完成promise --> then进入微任务 --> 输出4
答案:2 4 3 1
看一道题:(小试牛刀😀)
const promise1 = new Promise((resolve, reject) => {setTimeout(() => {resolve();}, 1000);
});
const promise2 = promise1.catch(() => {return 2;
});
console.log("promise1:", promise1);
console.log("promise2:", promise2);
setTimeout(() => {console.log("promise1:", promise1);console.log("promise2:", promise2);
}, 2000);
解析:
promise1 :pending
一秒后运行回调
promise1失败后运行回调
promise2:pending
console.log("promise1:", promise1);--->pending
console.log("promise2:", promise2);--->pending
两秒后运行回调
现在一秒到了 promise1:fulfilled
console.log("promise1:", promise1);--->fulfilled值为undefine
console.log("promise2:", promise2);--->现在promise1完成了你promise2没有对成功处理 所以你promise2 直接就用promise1的状态去处理 所以为 fulfilled值为undefine
上面的案例教会我们:
catch 方法返回的是一个新的 Promise 对象 其状态由捕获的promise决定
看一道题:(小试牛刀😀)
async function m() {const res = await 1;console.log(res);
}
m();
console.log(2);
解析:
javascript">//改个写法你就知道了
function m() {return Promise.resolve(1).then((n) => {console.log(n);});
}
m();
console.log(2);
//.then 怎么样会进入微队列 暂不执行 先输出2 执行微队列然后输出1
看一道题:(小试牛刀😀)
async function m() {console.log(0);const n = await 1;console.log(n);
}
(async () => {await m();console.log(2);
})();
console.log(3);
解析:
立即执行函数执行 等待m运行完成 m开始运行 输出0 n进入微队列等待输出1 输出1不执行 m就一直等待 现在到全局执行 输出3
输出完成后是 0 3 然后执行微任务队列 输出1 此时m运行完成 立即执行函数 内部的m也就完成了 也就输出2 了
也就是 0 3 1 2
看一道题:(小试牛刀😀)
async function m1() {return 1;
}async function m2() {const n = await m1();console.log(n);return 2;
}async function m3() {const n = m2();console.log(n);return 3;
}m3().then((n) => {console.log(n);
});
m3();
console.log(4);
解析:
m3().then()执行后 :
m3调用m2 m2调用m1;
当本次调用来到m2的时候 他会进行await 不管你是什么状态都要进入微队列里面 console.log(n);也就是输出1 进入微队列;
当本次调用来到m3的时候 他没有用await 他不会等待直接输出 console.log(n); m2是用async标记的 直接就是返回一个promise <pending>(m2现在还在微队列中呢,没有完成);
当来到m3().then()的时候 又进入了微队列等待输出3小总结:m3().then()调用后 会输出一个 promise <pending> 微任务队列:等待输出1 等待输出3m3()执行后:
m3调用m2 m2调用m1;
m2等待输出1进入微队列 m3直接输出promise <pending> 所以结果是:promise <pending>
promise <pending>
4
1
3
1
看一道题:(小试牛刀😀)
Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log);
秒杀小知识:当你看到Then的时候如果你发现传递的不是一个函数 你就可以删掉就完事了! 上面的then(2)删掉
Promise.resolve(1).then(console.log);//就这样看 Promise.resolve(3)是一个对象不是函数
答案等于:1
Promise.resolve(1).then((res) => {console.log(res);
});
Promise.resolve(1).then(console.log);
上面这俩哥们是等价的!
看一道题:(小试牛刀😀)
var a;
var b = new Promise((res, rej) => {console.log("Promise1");setTimeout(() => {res();}, 1000);
}).then(() => {console.log("Promise2");}).then(() => {console.log("Promise3");}).then(() => {console.log("Promise4");});a = new Promise(async (res, rej) => {console.log(a);await b;console.log(a);console.log("after1");await a;res(true);console.log("after2");
});
console.log("end");
解析:
await a;
res(true); 你等待不到结果的 别想了 after2不能输出
new 的时候直接输出 console.log("Promise1");
宏任务:
微任务: await b;
前期输出为:
Promise1
undefinde
end
Promise2
Promise3
Promise4
Promise<pending>
after1
看一道题:(小试牛刀😀)
async function async1() {console.log("async1 start");await async2();console.log("async1 end");
}async function async2() {console.log("async2");
}
console.log("srript start");setTimeout(() => {console.log("timeout");
}, 0);async1();new Promise((resolve, reject) => {console.log("promise1");resolve();
}).then(function () {console.log("promise2");
});
console.log("script end");
解析:
console.log("srript start");
console.log("async1 start");
console.log("async2");
console.log("promise1");
console.log("script end");
console.log("async1 end");
console.log("promise2");
console.log("timeout");宏任务: console.log("timeout");
微任务: console.log("async1 end"); console.log("promise2");