ES6— promise

名称:

译为“承诺”,这也就表达了将来会执行的操作,代表异步操作;

状态:

一共有三种状态,分别为pending(进行中)、fulfilled(已成功)和rejected(已失败)。

特点:

(1)只有异步操作可以决定当前处于的状态,并且任何其他操作无法改变这个状态;

(2)一旦状态改变,就不会在变。状态改变的过程只可能是:从pending变为fulfilled和从pending变为rejected。如果状态发生上述变化后,此时状态就不会在改变了,这时就称为resolved(已定型)

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

Promise 对象是由关键字 new 及其构造函数来创建的。

首先,

介绍一下如何创建一个 Promise
在这里插入图片描述
由上述代码我们可知:

该构造函数接收两个函数作为参数,分别是resolve和reject。

当异步操作执行成功后,会将异步操作结果作为参数传入resolve函数并执行,此时Promise对象状态从pending变为fulfilled;

失败则会将异步操作的错误作为参数传入reject函数并执行,此时Promise对象状态从pending变为rejected;

接下来,

我们通过then方法,分别指定resolved状态和rejected状态的回调函数。

在这里插入图片描述
then方法可以接收两个回调函数作为参数,第一个回调函数就是fulfilled状态时调用;第二个回调函数就是rejected时调用。这边的第二个参数是可选的,不一定要提供。

下面是一个Promise对象的简单例子。
在这里插入图片描述
上面代码中,timeout方法返回一个Promise实例,表示一段时间以后才会发生的结果。过了指定的时间(ms参数)以后,Promise实例的状态变为resolved,就会触发then方法绑定的回调函数。

Promise 新建后就会立即执行。
在这里插入图片描述
上面代码中,Promise 新建后立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。

下面是异步加载图片的例子。
在这里插入图片描述

上面代码中,使用Promise包装了一个图片加载的异步操作。如果加载成功,就调用resolve方法,否则就调用reject方法。

Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。

那就new一个

在这里插入图片描述
Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解,后面再细究概念。

在上面的代码中,我们执行了一个异步操作,也就是setTimeout,2秒后,输出“执行完成”,并且调用resolve方法。

运行代码,会在2秒后输出“执行完成”。注意!我只是new了一个对象,并没有调用它,我们传进去的函数就已经执行了,这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数,如:
在这里插入图片描述
方法

(1) Promise.all(iterable)

参数

iterable必须是一个可迭代对象,如 Array 或 String。

返回值

一个新的Promise实例。

Promise.all 的使用

如果传入的参数中存在不是Promise实例,则会先调用Promise.resolve,将其转为Promise实例,再进一步处理。

在这里插入图片描述
Promise.all 的异步和同步

如果传入的参数为空的可迭代对象,则同步返回一个已完成(already resolved)状态的 Promise;

非空时则返回一个异步完成(asynchronously resolved)Promise
在这里插入图片描述
Promise.all 的快速返回失败行为

传入的参数中任意一个promise返回失败时,那么整体立即返回失败,返回的错误信息是第一个失败的promise结果。
在这里插入图片描述
2) Promise. race(iterable)

参数

iterable必须是一个可迭代对象,如 Array 或 String。

返回值

一个新的Promise实例。

Promise.race 的使用

race有赛跑之译,因此返回的新实例状态,是跟随参数中最先改变状态的那个实例;如果不是Promise实例,依旧先用Promise.resolve方法,转化后再进一步处理。

如果传的迭代为空,则返回的Promise永远等待
在这里插入图片描述
(3) Promise.resolve(value)

返回一个以给定的值解析后的Promise对象;

参数 value 主要有以下几种情况:

一个Promise实例

原封不动的返回该实例;
在这里插入图片描述

一个thenable对象:是指含有then方法的对象

跟随这个thenable对象的,采用它的最终状态;
在这里插入图片描述
普通数据:[String|Array|Object|Number]

直接将传入参数当最终结果并返回一个新的Promise;
在这里插入图片描述
无参数

直接返回一个resolved状态的Promise对象

在这里插入图片描述
(4) Promise.reject(reason)

参数:表示被拒绝的原因;

⚠️传入的参数会原封不动的作为 reject 函数的理由,并不会因为传入的参数 Promise 或者是 thenable 对象而有所不同

返回值:一个含有reason的状态为rejected的Promise

Promise原型

(1) Promise.prototype.then()

Promise 的实例具有then方法,主要作用是为 Promise 实例发生状态改变时添加回调函数。

它接收两个回调函数作为参数,第一个参数是fulfilled状态时的回调函数;第二个参数是rejected状态时的回调函数,可不传入。

并且该方法返回一个新的Promise对象。

语法:
在这里插入图片描述
2) Promise.prototype. catch()

返回一个Promise,并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected)相同。

语法

在这里插入图片描述
推荐使用catch方法,不要在then方法中定义rejected状态的回调函数;这是因为使用catch还可以捕获在then方法执行中存在的错误。
在这里插入图片描述
(3) Promise.prototype. finally()

返回一个Promsie。是指,在上一轮 promise 运行结束后,无论fulfilled还是rejected,都会执行指定的回调函数。

该方法适合,无论结果如何都要进行的操作,例如清除数据。

语法:该回调函数的不接受任何参数;
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值