Promise总结

已于 2024-07-13 16:36:01 修改
阅读量36 收藏
点赞数
文章标签： 前端
于 2024-07-12 20:09:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69551472/article/details/140387778
版权

Promise.then() 的返回值仍然是 Promise 对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    let p = new Promise((resoleve, reject) => {
      setTimeout(() => {
        resoleve("返回值");
      }, 1000);
    });

    const backP = p.then((res) => {
      console.log("----打印：", res);
    //   return "你好"
      return Promise.resolve(res + "成功的promise");
    });
    const finallyBackP = backP.then((res) => {
      console.log("----打印：", res);
      return Promise.reject("最后是失败的promise");
    });
    setTimeout(() => {
      console.log("----打印：backP", backP);
    }, 2000);
    setTimeout(() => {
      console.log("----打印：finallyBackPP", finallyBackP);
    }, 3000);

    //执行结果
    // ----打印： 返回值
    // ----打印： 返回值成功的promise
    // ----打印：backP Promise {<fulfilled>: '返回值成功的promise'}
    // ----打印：finallyBackPP Promise {<rejected>: '最后是失败的promise'}
  </script>
</html>

Promise.all 方法
Promise.all 是 JavaScript 中 Promise 对象的一个静态方法，它接受一个可迭代对象（通常是数组）作为参数，这个可迭代对象的每个成员都是一个 Promise。Promise.all 会等待所有的 Promise 都成功解决（fulfilled）后，才完成（fulfill）它自身返回的 Promise，并且会返回一个包含所有 Promise 结果的数组。如果任何一个 Promise 被拒绝（rejected），Promise.all 将立即拒绝，并返回第一个被拒绝的 Promise 的结果。

下面是 Promise.all 的一些关键特性和用法：

基本用法

let promise1 = Promise.resolve(3);
let promise2 = Promise.resolve(4);
let promise3 = 42; // 非Promise对象会被立即视为已解决的Promise

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // 输出: [3, 4, 42]
});

在这个例子中，Promise.all 接受一个包含三个 Promise 的数组。所有 Promise 都成功解决后，Promise.all 返回的 Promise 也会解决，并返回包含所有结果的数组。

错误处理

let promise1 = Promise.reject('error1');
let promise2 = Promise.resolve(4);

Promise.all([promise1, promise2]).catch(error => {
  console.log(error); // 输出: 'error1'
});

如果 promise1 被拒绝，Promise.all 将立即拒绝，并跳过其他 Promise 的结果，即使 promise2 成功解决。

与 Promise.allSettled 的区别

Promise.allSettled 是另一个静态方法，它不管 Promise 的结果如何，都会等待所有 Promise 结束（无论是解决还是拒绝），然后返回一个对象数组，每个对象包含对应的 Promise 结果。

应用场景

Promise.all 常用于需要并行处理多个异步操作，并且只有当所有操作都完成后才能继续执行的场景。例如，同时从多个源加载数据，只有所有数据都加载完成后，才能进行下一步处理。

注意事项

  • Promise.all 会立即执行，即使传入的数组为空。
  • 如果传入的可迭代对象中包含非 Promise 对象，它们会被立即视为已解决的 Promise，其结果就是它们自身。
  • 如果 Promise.all 的参数不是一个可迭代对象，将会抛出一个错误。

Promise.all 是并发处理异步操作的强大工具，正确使用它可以显著提高程序的效率和响应性。

var p1 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    resoleve("p1--3000");
  }, 3000);
});
var p2 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    resoleve("p2--1000");
  }, 1000);
});
var p3 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    console.log("----打印：看看是先执行失败，还是全部执行完再catch");
    resoleve("p3--5000");
  }, 5000);
});
 
//第一情况
 var promiseArr = [p1, p2, p3];
 console.time("promiseArr");
  Promise.all(promiseArr)
    .then((res) => {
      console.log("res", res); //res [ 'p1--3000', 'p2--1000', 'p3--5000' ]
      console.timeEnd("promiseArr"); // promiseArr: 5.020s
    })
    .catch((err) => console.log(err));
 
//另外情况
var p4 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    reject("p4--2000");
  }, 2000);
});
 
var promiseArr = [p1, p2, p3, p4];
console.time("promiseArr");
Promise.all(promiseArr)
  .then((res) => {
    console.log("res", res);
    console.timeEnd("promiseArr");
  })
  .catch((err) => console.log(err)); 
 
//打印顺序
//p4--2000
//输出----打印：看看是先执行失败，还是全部执行完再catch 
 
//解释：p3的输出，比上边catch晚输出因此，如果有失败状态，就会提前结束、去执行all里面的回调函数

Promise.any
截至目前（2023年），Promise.any 是一个相对较新的 JavaScript 特性，它并不是 ECMAScript 标准的一部分，而是在一些现代浏览器和 Node.js 版本中作为实验性特性提供。这个方法与 Promise.race 类似，但是它的行为是等待第一个解决的 Promise 而不是第一个拒绝的。

基本用法

Promise.any 接受一个可迭代对象（通常是数组），其中的每个成员都是一个 Promise 对象。如果数组中至少有一个 Promise 成功解决，Promise.any 返回的 Promise 将解决，并返回第一个解决的 Promise 的结果。如果所有传入的 Promise 都被拒绝，Promise.any 返回的 Promise 也会被拒绝，并返回一个包含所有拒绝原因的聚合错误。

let promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'error1'));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 50, 'success'));

Promise.any([promise1, promise2]).then(value => {
  console.log(value); // 输出: 'success'
}).catch(error => {
  console.error(error);
});

在这个例子中，promise2 是第一个解决的 Promise，所以 Promise.any 返回的 Promise 将解决并返回 'success'。

错误处理

如果所有传入的 Promise 都被拒绝，Promise.any 返回的 Promise 将被拒绝，并返回一个 AggregateError 对象，它是 Error 的一个子类，包含所有拒绝的原因。

let promise1 = Promise.reject('error1');
let promise2 = Promise.reject('error2');

Promise.any([promise1, promise2]).catch(error => {
  console.log(error); // AggregateError
  console.log(error.errors); // ['error1', 'error2']
});

应用场景

Promise.any 适用于以下场景：

  • 当你想要快速尝试多个异步操作，只关心第一个成功的结果。
  • 当你想要实现超时逻辑，例如，尝试多个服务直到一个服务成功响应，或者在超时前等待第一个响应。

注意事项

  • Promise.any 并不广泛支持，使用前需要检查环境是否支持。
  • 如果传入的可迭代对象为空，Promise.any 返回的 Promise 将立即被拒绝，并返回一个 AggregateError，其 errors 属性为空数组。
  • 如果传入的可迭代对象中包含非 Promise 对象，它们会被立即视为已解决的 Promise，其结果就是它们自身。
    Promise.any 提供了一种新的方式来处理多个异步操作，允许开发者更快地响应第一个成功的结果，同时优雅地处理所有操作失败的情况。
    code
var p1 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    resoleve("p1--3000");
  }, 3000);
});
var p2 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    reject("p2--1000");
  }, 1000);
});
var p3 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    console.log("----打印p3");
    resoleve("p3--5000");
  }, 5000);
});
 
var promiseArr = [p1, p2, p3];
console.time("promiseArr");
Promise.any(promiseArr)
  .then((res) => {
    console.log("res", res); //res [ 'p1--3000', 'p2--1000', 'p3--5000' ]
    console.timeEnd("promiseArr"); // promiseArr: 5.020s
  })
  .catch((err) => console.log(err));
 
//输出顺序 --虽然p2已经执行完，但是为rejected状态，而any会返回第一个resolve状态的对象
//   res p1--3000
// promiseArr: 3.009s
// ----打印p3
 
//另外一种情况
var p1 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    reject("p1--3000");
  }, 3000);
});
var p2 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    reject("p2--1000");
  }, 1000);
});
var p3 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    console.log("----打印p3");
    reject("p3--5000");
  }, 5000);
});
 
var promiseArr = [p1, p2, p3];
console.time("promiseArr");
Promise.any(promiseArr)
  .then((res) => {
    console.log("res", res); //res [ 'p1--3000', 'p2--1000', 'p3--5000' ]
    console.timeEnd("promiseArr"); // promiseArr: 5.020s
  })
  .catch((err) => console.log(err));
 
//输出结果   解释--因为p1，2，3都是错误，所以any一直在等有成功的状态，所以知道p3结束后，没有成功的，就走catch那边
// ----打印p3
// [AggregateError: All promises were rejected] {
//   [errors]: [ 'p1--3000', 'p2--1000', 'p3--5000' ]
// }

Promise.race
方法接收的参数和.all、.any接收的参数一样，接收一个可迭代promise对象的数组，当任何一个promise的状态先确定（拒绝或者成功），则会执行.race中的回调函数，具体根据promise的状态 —和allSettled效果互斥

var p1 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    console.log("----打印：p1");
    resoleve("p1--3000");
  }, 3000);
});
 
let p2 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    reject("p2--1000");
  }, 1000);
});
 
Promise.race([p1, p2])
  .then((res) => {
    console.log("----打印：res", res);
  })
  .catch((err) => {
    console.log("----打印：err", err);
  });
 
//执行结果
//----打印：err p2--1000
//----打印：p1
 
//另外情况
 
let p3 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    resoleve("p3--500");
  }, 500);
});
 
Promise.race([p1, p2, p3])
  .then((res) => {
    console.log("----打印：res", res);
  })
  .catch((err) => {
    console.log("----打印：err", err);
  });
 
//打印结果
// ----打印：res p3--500
// ----打印：p1

Promise.allSettled

var p1 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    console.log("----打印：p1");
    resoleve("p1--3000");
  }, 3000);
});
 
let p2 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    reject("p2--1000");
  }, 1000);
});
 
let p3 = new Promise((resoleve, reject) => {
  setTimeout(() => {
    resoleve("p3--500");
  }, 500);
});
 
let p4 = new Promise((resolve, reject) => {
  throw new Error("抛出错误");
});
 
Promise.allSettled([p1, p2, p3, p4])
  .then((result) => {
    console.log("----打印：result", result);
  })
  .catch((err) => {
    console.log("----打印：", err); //不执行
  });
 
//执行结果
// ----打印：p1
// ----打印：result [
//   { status: 'fulfilled', value: 'p1--3000' },
//   { status: 'rejected', reason: 'p2--1000' },
//   { status: 'fulfilled', value: 'p3--500' },
//   {
//     status: 'rejected',
//     reason: Error: 抛出错误
//   }
// ]
爱敲代码小黑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
promise的学习总结
09-08
Promise的学习总结
Promise.xmind
05-30
promise是什么？ 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列
promise总结
weixin_58414196的博客
12-06 68
promise
Promise 总结
liuxiaodonglll的博客
06-06 715
欢迎访问我的个人博客 晓东的博客Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效，使得 Node.js 应用的越来越广泛；Node.js 是单线程的，所以需要按顺序执行异步逻辑时一般采用后续传递风格，也就是将后续逻辑封装在回调函数中作为起始函数的参数，逐层嵌套，这会导致所谓的 “回调地域”。这种情况下，Promise 等其他异步编程解决方案应运而生。Promise是什么？
promise 总结
前端码农
08-15 210
1
如何利用ES6进行Promise封装总结
10-17
主要介绍了如何利用ES6进行Promise封装总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
promise:简单对Promise进行总结
05-18
####Promise 1、What is Promise? The Promise object is used for asynchronous computations. A Promise represents a value which may be available now, or in the future, or never. Promise用于异步计算 可以...
ES6中Promise的使用方法实例总结
10-15
主要介绍了ES6中Promise的使用方法,结合实例形式总结分析了Promise对象中的各种常用方法及基本使用技巧,需要的朋友可以参考下
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 243
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 171
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 685
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 832
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 984
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 747
模糊搜索功能 每个网站都要用得到
Haproxy搭建Web群集
wkysdhr的博客
07-08 953
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 373
【代码】​​ 翻页 上一页/下一页。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 92
通过sm4对文件进行加解密，用户输入密码
Promise 原理
09-06
总结起来，Promise的原理是通过executor函数、resolve函数和reject函数来实现异步操作的封装和处理。通过链式调用then方法，可以对Promise的结果进行处理和传递。而Promise的状态变化是基于事件循环和回调函数的机制...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值