如何秒杀Promise面试题

ops/2024/12/16 1:42:14/

如何秒杀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");

http://www.ppmy.cn/ops/42440.html

相关文章

摸鱼大数据——Hadoop基础理论知识之ZooKeeper1-3

1、ZK概述 ZooKeeper概念: Zookeeper是一个分布式协调服务的开源框架。本质上是一个分布式的小文件存储系统 ZooKeeper作用: 主要用来解决分布式集群中应用系统的一致性问题。HA搭建&#xff1b;管理去中心化的集群&#xff08;例如Kafka&#xff09; ZooKeeper结构: 采用树形…

Web 安全基础:如何正确设置 HTTP 头信息

如何设置正确的网站安全头部 近年来&#xff0c;推出“安全评分卡”的公司如雨后春笋般涌现&#xff0c;这已开始成为企业销售过程中的一个考量因素。我从客户那里了解到&#xff0c;他们对于那些被评为低分的供应商持有顾虑&#xff0c;并且至少有一次是基于这种评分初步改变…

如何轻松访问 Android 手机和平板电脑上的内部存储

概括 在数字设备领域&#xff0c;我们的智能手机充当虚拟金库&#xff0c;在其范围内存储个人数据、珍贵记忆和重要信息的宝库。因此&#xff0c;我们将指导您如何访问 Android 上的内部存储&#xff0c;确保您可以安全、轻松地检查内部文件系统并管理文件。同时&#xff0c;您…

RustGUI学习(iced/iced_aw)之扩展小部件(二十三):如何使用sliderbar部件来创建滑动条?

前言 本专栏是学习Rust的GUI库iced的合集,将介绍iced涉及的各个小部件分别介绍,最后会汇总为一个总的程序。 iced是RustGUI中比较强大的一个,目前处于发展中(即版本可能会改变),本专栏基于版本0.12.1. 概述 这是本专栏的第二十三篇,主要讲述sliderbar滑动条部件的使用,…

CSS实现暗黑模式

暗黑模式 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Dark Mode Example</title><…

【cocos creator】进度条控制脚本,支持节点进度条,图片进度条,进度条组件,和进度文字展示

进度条控制脚本&#xff0c;支持节点进度条&#xff0c;图片进度条&#xff0c;进度条组件&#xff0c;和进度文字展示 const { ccclass, property, menu } cc._decorator;let text_type cc.Enum({"20%": 0,"1/5": 1,"差值": 2,"自定义…

Kubernetes Deployment 之版本回退和灰度(金丝雀)发布

Kubernetes Deployment 之版本回退和灰度&#xff08;金丝雀&#xff09;发布 Deployment 版本回退 在版本发布的过程中&#xff0c;可能升级的版本存在问题&#xff0c;那么就需要版本回退。 查看指定 Deployment 版本历史 rootk8s-master1:~# kubectl rollout history depl…

k8s集群配置普通用户权限

集群管理员&#xff1a;负责管理 Kubernetes 集群的用户&#xff0c;拥有最高权限&#xff0c;可以对集群中的资源进行任何操作。 开发者&#xff1a;在 Kubernetes 集群中部署和管理自己的应用&#xff0c;可能有限制的权限&#xff0c;仅能管理特定的命名空间或资源。 第三…