【ES6知识】Promise 对象

这篇具有很好参考价值的文章主要介绍了【ES6知识】Promise 对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.1 概述

Promise 对象用于表示一个异步操作的最终完成(或失败)及其结果值。是异步编程的一种解决方案(可以解决回调地狱问题)。

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知值的代理。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 promise,以便在未来某个时候把值交给使用者。

原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发

一个 Promise 必然处于以下几种状态之一:

  • 待定(pending):初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled):意味着操作成功完成。
  • 已拒绝(rejected):意味着操作失败。

Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)。

Promise 对象一旦新建它就会立即执行,中途无法取消。

【ES6知识】Promise 对象,前端开发,ES6,es6,javascript,前端,promise

我们可以用 Promise.prototype.then()Promise.prototype.catch()Promise.prototype.finally() 这些方法将进一步的操作与一个变为已敲定状态的 promise 关联起来。

例如 .then() 方法需要两个参数,第一个参数作为处理已兑现状态的回调函数,而第二个参数则作为处理已拒绝状态的回调函数。每一个 .then() 方法还会返回一个新生成的 promise 对象,这个对象可被用作链式调用,就像这样:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

myPromise
  .then(value => { return value + ' and bar'; })
  .then(value => { return value + ' and bar again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { console.log(value) })
  .catch(err => { console.log(err) });

在没有迫切需要的情况下,可以在最后一个 .catch() 语句时再进行错误处理,这种做法更加简单。过早地处理变为已拒绝状态的 promise 会对之后 promise 的链式调用造成影响,除非我们需要马上处理这个错误,例如,外面必须抛出某种类型的错误以在链式调用中传递错误状态。。

1.2 静态方法

Promise.all()Promise.race() 是并行运行异步操作的两个组合式工具。

  • Promise.all(iterable) 这个方法返回一个新的 promise 对象,等到所有的 promise 对象都成功或有任意一个 promise 失败。如果所有的 promise 都成功了,它会把一个包含 iterable 里所有 promise 返回值的数组作为成功回调的返回值。顺序跟 iterable 的顺序保持一致。一旦有任意一个 iterable 里面的 promise 对象失败则立即以该 promise 对象失败的理由来拒绝这个新的 promise。
  • Promise.race(iterable) 等到任意一个 promise 的状态变为已敲定。当 iterable 参数里的任意一个子 promise 成功或失败后,父 promise 马上也会用子 promise 的成功返回值或失败详情作为参数调用父 promise 绑定的相应处理函数,并返回该 promise 对象。
const p1 = getCmpData("basicSetting");
var p2 = null;
if (that.isOnlineForm) {
	p2 = getCmpData("formDesign");
} else {
	p2 = new Promise(function (resolve, reject) {
        resolve(null);
    });
}
const p3 = getCmpData("processDesign");

Promise.all([p1, p2, p3])
.then((res) => {
  const param = {};
  this.sendToServer(param); //接口调用传参
})
.catch((err) => {//错误信息处理
  err.target && (this.activeStep = err.target);
  err.msg && this.$message.warning(err.msg);
});
  • Promise.allSettled(iterable) 等到所有 promise 都已敲定(每个 promise 都已兑现或已拒绝)。返回一个 promise,该 promise 在所有 promise 都敲定后完成,并兑现一个对象数组,其中的对象对应每个 promise 的结果。
  • Promise.any(iterable) 接收一个 promise 对象的集合,当其中的任意一个 promise 成功,就返回那个成功的 promise 的值。

Promise.resolve()Promise.reject() 是手动创建一个已经 resolve 或者 reject 的 Promise 快捷方法。它们有时很有用。

  • Promise.reject(reason) 返回一个状态为已拒绝的 Promise 对象,并将给定的失败信息传递给对应的处理函数。
  • Promise.resolve(value) 返回一个状态由给定 value 决定的 Promise 对象。如果该值是 thenable(即,带有 then 方法的对象),返回的 Promise 对象的最终状态由 then 方法执行结果决定;否则,返回的 Promise 对象状态为已兑现,并且将该 value 传递给对应的 then 方法。
[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
.then(result3 => { /* use result3 */ });

通常而言,如果你不知道一个值是否是 promise 对象,使用 Promise.resolve(value) 来返回一个 Promise 对象,这样就能将该 value 以 promise 对象形式使用。

1.3 实例方法

  • Promise.prototype.then() 为 promise 添加被兑现和被拒绝状态的回调函数,其以回调函数的返回值兑现 promise。若不处理已兑现或者已拒绝状态(例如,onFulfilledonRejected 不是一个函数),则返回 promise 被敲定时的值。
  • Promise.prototype.catch() 为 promise 添加一个被拒绝状态的回调函数,并返回一个新的 promise,若回调函数被调用,则兑现其返回值,否则兑现原来的 promise 兑现的值。
  • Promise.prototype.finally() 为 promise 添加一个回调函数,并返回一个新的 promise。这个新的 promise 将在原 promise 被兑现时兑现。而传入的回调函数将在原 promise 被敲定(无论被兑现还是被拒绝)时被调用。

1.4 Promise 拒绝事件

当 Promise 被拒绝时,会有下文所述的两个事件之一被派发到全局作用域(通常而言,就是window;如果是在 web worker 中使用的话,就是 Worker 或者其他 worker-based 接口)。这两个事件如下所示:

  • rejectionhandled 当 Promise 被拒绝、并且在 reject 函数处理该 rejection 之后会派发此事件。
  • unhandledrejection 当 Promise 被拒绝,但没有提供 reject 函数来处理该 rejection 时,会派发此事件。

以上两种情况中,PromiseRejectionEvent 事件都有两个属性,一个是 promise 属性,该属性指向被驳回的 Promise,另一个是 reason (en-US) 属性,该属性用来说明 Promise 被驳回的原因。文章来源地址https://www.toymoban.com/news/detail-729041.html

window.addEventListener("unhandledrejection", event => {
  /* 你可以在这里添加一些代码,以便检查
     event.promise 中的 promise 和
     event.reason 中的 rejection 原因 */

  event.preventDefault();
}, false);

到了这里,关于【ES6知识】Promise 对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6基础知识三:对象新增了哪些扩展?

    一、属性的简写 ES6中,当对象键名与对应值名相等的时候,可以进行简写 方法也能够进行简写 在函数内作为返回值,也会变得方便很多 注意:简写的对象方法不能用作构造函数,否则会报错 二、属性名表达式 ES6 允许字面量定义对象时,将表达式放在括号内 表达式还可以

    2024年02月15日
    浏览(37)
  • ES6-10:Promise

    前端开发因为网络交互的存在,产生了一种最常见的独特场景——异步,即程序执行的过程并非完全按照代码的书写顺序执行。异步编程的解决方法有①回调函数、②事件、③Promise、④观察者对象; Promise是ES6提供的一种异步编程的一种解决方案。简单来书就是一个容器,里

    2024年02月08日
    浏览(42)
  • ES6 Promise 详解

    目录 一、Promise基本介绍 二、Promise实现多次请求         1.传统Ajax方式实现多次请求 :              1.1 json数据准备             1.2 JQuery操作Ajax         2.使用ES6新特性Promise方式 :  三、Promise代码重排优化         1.问题分析 :          2.代码优化 :              2

    2024年02月08日
    浏览(34)
  • ES6 - promise(1)

    今天决定对之前学过的一些前端的知识进行梳理和总结,因为最近都是独自承担项目的开发与搭建,所以先从前后端交互的第一线axios来梳理,复习axios首先一定要先复习promise对象。 promise对象是ES6新引入的一个解决异步编程的方案。首先我们要知道前端比较常见的两种异步编

    2024年02月08日
    浏览(36)
  • JavaScript Es6_2笔记 (深入对象 + 内置构造函数 + 包装类型)+包含实例方法

    了解面向对象编程的基础概念及构造函数的作用,体会 JavaScript 一切皆对象的语言特征,掌握常见的对象属性和方法的使用。 了解面向对象编程中的一般概念 能够基于构造函数创建对象 理解 JavaScript 中一切皆对象的语言特征 理解引用对象类型值存储的的

    2024年02月12日
    浏览(46)
  • 【ES6】Promise.all用法

    Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。 上面代码中,Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()方法的参数可以

    2024年02月09日
    浏览(33)
  • 第一章前端开发ES6基础

    认识ES6 概述 ES6表示ECMAScript规范的第六版,正式名称为 ECMAScript 2015 ,ECMAScript是由ECMA国际标准组织制定的一项 脚本语言 的标准规范化,引入了许多新特性和语法。 其中包括 箭头函数、let和const声明、类、模板字符串、解构赋值、参数默认值、展开操作符、Promise 等等。这些

    2024年02月08日
    浏览(50)
  • 第二章前端开发ES6基础

    目录 扩展运算符 概述 语法 应用 模板字符串 概述 应用 内置对象扩展 概述 数组扩展方法 字符串扩展方法 set数据结构 概述 基本使用 操作方法 遍历方法 认识symbol 概述 作用 基本使用 项目 扩展运算符 概述 扩展运算符(spread operator)是 ES6 中新增的一种运算符,用 三个点(

    2024年02月07日
    浏览(49)
  • 【ES6】Promise.allSettled的用法

    Promise.allSettled() 是一个Promise方法,用于处理一个Promise数组,返回一个新的Promise数组,每个元素对应原始Promise的状态。这个方法可以用于处理多个异步操作,并且能够获取每个操作的结果和状态。 下面是Promise.allSettled()的详细代码示例: 输出结果: 在上面的代码中,我们创

    2024年02月10日
    浏览(38)
  • 【ES6】fetch函数和Promise

    fetch函数是现代JavaScript中用于发起HTTP请求的一个非常强大的工具。它返回一个Promise,这个Promise在请求成功时解析为Response对象,或者在请求失败时拒绝。 以下是一个基本的fetch使用示例: 在这个例子中,我们首先向https://api.example.com/data发起一个GET请求。然后,我们检查响应

    2024年02月09日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包