Promise的概念及基本使用①

网友投稿 241 2022-11-30

Promise的概念及基本使用①

文章目录

​​封装Ajax的请求​​​​Promise 的状态改变​​​​Promise对象结果属性​​​​Promise的工作流程​​​​Promise的API​​

​​Promise.resolve 方法​​​​Promise.reject 方法​​​​Promise.all 方法​​​​Promise.race 方法​​

封装Ajax的请求

Promise 的状态改变

Promise的状态是Promise对象的属性,叫做PromiseState。 他一共有三个值:

pending 未决定的resolved / fullfilled 成功rejected 失败

而Promise的状态改变情况只有两种:

pending 变为 resolvedpending 变为 rejected

且一个 promise 对象只能改变一次 无论变为成功还是失败, 都会有一个结果数据 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

Promise对象结果属性

Promise实例对象中还有一个属性​​PromiseResult​​,这个属性中保存着异步任务成功或失败的结果。

这个结果只有两个东西可以进行修改:

resolve()reject()

在这两个函数作出修改之后,在后续的then回调方法中,就又可以把结果给取出来。

Promise的工作流程

Promise的API

Promise 构造函数: Promise (excutor) {} (1) executor 函数: 执行器 (resolve, reject) => {} (2) resolve 函数: 内部定义成功时我们调用的函数 value => {} (3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

Promise.prototype.then 方法: (onResolved, onRejected) => {} (1) onResolved 函数: 成功的回调函数 (value) => {} (2) onRejected 函数: 失败的回调函数 (reason) => {}

说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象

Promise.prototype.catch 方法: (onRejected) => {} (1) onRejected 函数: 失败的回调函数 (reason) => {}

说明: then()的语法糖,只能指定失败的回调, 相当于: then(undefined, onRejected)

例如:

Promise.resolve 方法

Promise.resolve 方法: (value) => {} (1) value: 成功的数据 或 promise 对象 说明: ①返回一个成功/失败的 promise 对象 ②resolve方法是属于Promise的方法,而不是Promise对象的方法。

例如:

如果返回的是错误的Promise对象,那么浏览器会有一个报错,此时可以用catch进行处理。

Promise.reject 方法

Promise.reject 方法: (reason) => {} (1) reason: 失败的原因 说明: 返回一个失败的 promise 对象,失败的结果为传入的值。

例如:

Promise.all 方法

Promise.all 方法: (promises) => {} (1) promises: 包含 n 个 promise 的数组 说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败。如果成功,则其结果为所有成功Promise对象结果组成的数组,如果失败,则其结果为失败的Promise的结果(不是多个失败的结果,因为第一个失败的时候就直接return了,所以只会返回第一个)。

Promise.race 方法

Promise.race 方法: (promises) => {} (1) promises: 包含 n 个 promise 的数组 说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Spring关于@Scheduled限制的问题
下一篇:async 与 await
相关文章

 发表评论

暂时没有评论,来抢沙发吧~