当前位置: 首页 > news >正文

令人疑惑的Promise相关问题

令人疑惑的Promise相关问题

问题1

const promise = new Promise((resolve, reject) => {reject(Error('Error occurred'));
});promise.catch(error => console.log(error.message));
promise.catch(error => console.log(error.message));

输出:

Error occurred
Error occurred

解释:

  1. Promise 创建后立即被拒绝,并显示错误消息“发生错误”。
  2. Promise 附加了两个catch处理程序,当 Promise 被拒绝时,每个处理程序都会将错误消息记录到控制台。
  3. 由于 Promise 被拒绝,因此两个catch处理程序都将被执行,从而导致错误消息被记录两次。

问题2

console.log('start')const promise1 = new Promise((resolve, reject)=>{console.log(1)
})
console.log('end')

输出:

start
1
end

解释:

  1. console.log(‘start’)语句首先执行,并将“start”记录到控制台。
  2. 构造Promise函数被调用,但它不包含任何异步操作或对 resolve 或 reject 的调用。因此,构造函数内的console.log(1)语句是同步执行的。
  3. 最后,console.log(‘end’)执行,将“end”记录到控制台。

请记住,如果没有异步操作对Promise构造函数中 resolve 或 reject的进行调用,则 Promise 被视为立即解决,并且其行为是同步的。

问题3

function performTask() {return new Promise(function(resolve, reject) {reject()})
}let taskPromise = performTask();taskPromise.then(function() {console.log('success 1')}).then(function() {console.log('success 2')}).then(function() {console.log('success 3')}).catch(function() {console.log('error 1')}).then(function() {console.log('success 4')})

输出:

error 1
success 4

解释:

  1. performTask函数返回一个立即被拒绝的 Promise。
  2. 前三个.then()块被跳过,因为 Promise 被拒绝。
  3. .catch()块捕获拒绝并记录“错误 1”。
  4. 尽管出现错误,最后一个.then()块仍会执行,并将“Success 4”记录到控制台。这种行为是因为.catch()仅捕获前面的 Promise 链中的错误,而.then()无论之前的错误如何,都会执行后续块。

问题4

const promise = new Promise((resolve) => {resolve(1);
});promise.then((value) => {console.log(value);return value + 1;
}).then((value) => {console.log(value);throw new Error('Something went wrong');
}).catch((error) => {console.error(error.message);
});
1
2
Error: Something went wrong

解释:

  1. 第一个 .then() 记录1到控制台并返回 value + 1,即2。
  2. 第二个 .then() 记录2到控制台,然后故意抛出错误。
  3. 错误被.catch()块捕获,并且错误消息 Something went wrong 被记录到控制台。

此代码说明了异步操作与 Promise 的链接以及 .catch() 块如何捕获链中的错误。

问题5

const promise = new Promise(function(resolve, reject){setTimeout(function() {resolve('Resolved!');}, 1000);
});promise.then(function(value) {console.log(value)
});

输出:

# 1秒后打印
Resolved!

解释:

  1. setTimeout引入了延迟,使得 Promise 在 1000 毫秒后解析。
  2. 当 Promise 被解析时,.then() 块被执行,并且将 Resolved! 记录到控制台。

问题6

const promise = new Promise(function(resolve, reject){setTimeout(() => resolve(1), 1000);
});promise.then(function(result){console.log(result);return result * 2;}).then(function(result){console.log(result);return result * 2;}).then(function(result){console.log(result);return result * 2;});

输出:

1
2
4

解释:

  1. 在用值解析 Promise 之前引入 setTimeout 并设置了 1000 毫秒的延迟。
  2. 每个 .then() 块对先前的结果执行操作并记录更新的值。
  3. 处理程序的链接 .then() 允许顺序处理异步结果。

问题7

console.log('Start');
setTimeout(() => {console.log('Timeout');
}, 0);
Promise.resolve().then(() => {console.log('Promise resolved');
});
console.log('End');

输出:

Start
End
Promise resolved
Timeout

解释:

  1. console.log(‘Start’);:同步操作,将“Start”记录到控制台。
  2. setTimeout(() => { console.log(‘Timeout’); }, 0);:使用 setTimeout 异步操作。即使超时设置为0毫秒,当前同步代码执行完毕后仍然会执行。将 Timeout 记录到控制台。
  3. Promise.resolve().then(() => { console.log(‘Promise resolved’); });:使用已解析的 Promise 进行异步操作。这将在当前同步代码之后的事件循环的下一个周期中执行。将 Promise resolved 记录到控制台。
  4. console.log(‘End’);:同步操作,将 End 记录到控制台。

问题8

let firstTask = new Promise(function(resolve, reject) {setTimeout(resolve, 500, 'Task One');
});let secondTask;let thirdTask = new Promise(function(resolve, reject) {setTimeout(resolve, 1200, 'Task Three');
});let fourthTask = new Promise(function(resolve, reject) {setTimeout(reject, 300, 'Task Four');
});let fifthTask = new Promise(function(resolve, reject) {setTimeout(resolve, 1000, 'Task Two');
});let combinedPromise = Promise.all([firstTask, secondTask, thirdTask, fourthTask, fifthTask]);combinedPromise.then(function(data) {data.forEach(function(value) {console.log('Result:', value);});}).catch(function(error) {console.error('Error:', error);});

输出:

Error: Task Four

解释:

  1. 500 毫秒后解析firstTask值为’Task One’。
  2. secondTask未初始化,因此它被视为具有 undefined 值的已解决的 Promise。
  3. 1200 毫秒后解析 thirdTask 值为’Task Three’。
  4. 设置 fourthTask 为在 300 毫秒后拒绝,值为’Task Four’。
  5. 1000 毫秒后解析 fifthTask 值为’Task Two’。

问题9

const promise1 = new Promise(resolve => setTimeout(resolve, 100, 'One'));
const promise2 = new Promise(resolve => setTimeout(resolve, 200, 'Two'));Promise.race([promise1, promise2]).then(value => console.log(value)).catch(error => console.error(error));

输出:

One

解释:

  1. 创建两个 Promise(promise1和promise2)并使用 setTimeout 来模拟异步操作。
  2. 用于Promise.race解决或拒绝第一个已解决的承诺(解决或拒绝)。
  3. 在这种情况下,promise1首先返回结果(100 毫秒后),因此 .then 块被执行,并将“One”记录到控制台。
  4. 由于没有拒绝,因此不会触发 .catch 块。

问题10

const promise1 = Promise.resolve(1);
const promise2 = new Promise(resolve => setTimeout(resolve, 200));
const promise3 = new Promise((resolve, reject) => setTimeout(reject, 100, 'Error'));Promise.all([promise1, promise2, promise3]).then(values => console.log(values)).catch(error => console.error(error));

输出:

Error

解释:

  1. promise1立即返回结果1。

  2. promise2 在200 毫秒超时后解决。

  3. promise3 在 100 毫秒超时后被拒绝,并给出原因 ‘Error’。

Promise.all()方法采用 Promise 数组作为参数,并返回一个新的 Promise,当可迭代参数中的所有 Promise 都已实现时,Promise 将通过已实现值的数组来实现。如果数组中的任何一个 Promise 被拒绝,则最终的 Promise 也会被拒绝,并给出第一个被拒绝的 Promise 的原因。

由于 Promise ( promise3) 之一被拒绝,因此 Promise.all() 被拒绝,并且 catch 块被执行。因此,代码的输出将是 Error。

问题11

Promise.resolve(1).then(value => {console.log(value);return Promise.resolve(2);}).then(value => console.log(value));

输出:

1
2

解释:

  1. Promise.resolve(1)创建一个立即处理的 Promise 1。

  2. 第一个 .then() 块将解析值记录 1 到控制台并返回一个新的 Promise ( Promise.resolve(2))。

  3. 第二个 .then() 块将解析值记录2到控制台。

结论

总之,掌握 Promise 对于熟练的异步编程至关重要。了解 Promise 链、执行顺序以及诸如 Promise.all 和 Promise.race 之类的细微差别至关重要。通过有效的 catch 错误处理确保代码的健壮性。async/await 的出现简化了异步代码,提供了更加同步的格式。

未处理的Promise reject可能会导致警告或错误,这强调了正确的错误管理的重要性。可以精确地编排异步操作,使开发人员能够创建高效且响应迅速的应用程序。

http://www.lryc.cn/news/250388.html

相关文章:

  • Spring 多数据源搭建
  • 【二分查找】LeetCode1970:你能穿过矩阵的最后一天
  • 利用python连接MySQL数据库并执行相关sql操作
  • jenkins配置
  • LeNet对MNIST 数据集中的图像进行分类--keras实现
  • Django的回顾的第4天
  • 点云从入门到精通技术详解100篇-基于三维点云的工件曲面轮廓检测与机器人打磨轨迹规划(中)
  • Mapper文件夹在resource目录下但是网页报错找不到productMapper.xml文件的解决
  • 22.Oracle中的临时表空间
  • 附录A 指令集基本原理
  • Unittest单元测试之unittest用例执行顺序
  • 海云安谢朝海:开发安全领域大模型新实践 人工智能助力高效安全左移
  • Postman接口测试工具完整教程
  • Android 滑动按钮(开关) SwitchCompat 自定义风格
  • 前端面试灵魂提问-计网(2)
  • Git修改远程仓库名称
  • kafka 集群 ZooKeeper 模式搭建
  • 【LeetCode】 160. 相交链表
  • TZOJ 1429 小明A+B
  • 制作openeuler的livecd
  • B.牛牛排队伍——模拟双链表
  • 【PyTorch】(四)损失函数与优化器
  • 【Python】使用execute(sql)执行insert之后没有插入数据
  • 虚拟机备份数据自动化验证原理
  • 前端入门(五)Vue3组合式API特性
  • Doris 数据导入二:Stream Load 方式
  • 【算法刷题】Day10
  • SAP 如何检查已安装的SAP UI5 版本
  • 15、 深度学习之正向传播和反向传播
  • 微信小程序中复制文本