阅读:135
📔博主是一名大学在读本科生,主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是React框架,中间夹杂了一些基础知识的回顾⌨️
🌈博客主页👉codeMak1r.的博客
👉关注✨点赞👍收藏📂
🕹坚持创作✏️,一起学习📖,码出未来👨🏻💻!
前面我们详解了Promise对象的基本概念和使用👉点我查看Promise详解,这篇文章将为大家介绍Promise对象身上都有哪些API呢?又将如何使用呢?
Promise实例对象身上有一个属性叫做:【PromiseState】代表promise的状态。
【PromiseState】有三种值,分别是:
【pending(未定义)】,创建promise对象时处于此状态。
【resolved(成功)】,Promise事件成功时的状态。
【rejected(失败)】,Promise事件失败时的状态。
实例对象的另一个属性 【PromiseResult】 : 对象成功或者失败的结果
只有【resolve】和【reject】这两个函数可以修改PromiseResult的值。
Promise 构造函数: Promise(excutor) {}
- excutor 函数: 执行器(resolve,reject)=>{}
- resolve 函数:内部定义成功时我们调用的函数 (value) => {}
- reject 函数:内部定义失败时我们调用的函数 (reason) => {}
说明:excutor 会在 Promise内部立即同步调用,异步操作在执行器中执行。
Promise.prototype.then
方法:(onResolved,onRejected) => {}
- onResolved 函数:成功的回调函数 (value) => {}
- onRejected 函数: 失败的回调函数(reason) => {}
说明:指定用于得到成功的 value 的成功回调和用于得到失败 reason 的失败回调
返回一个新的 Promise 对象。
then方法的返回值也是一个Promise对象
=分割线=
若then方法回调内部的return是一个非Promise类型的参数,
then方法返回的这个Promise对象PromiseState是成功,PromiseResult是return的值。
=分割线=
then方法回调内部的return是一个Promise对象,
then方法返回的这个Promise对象PromiseState成功与否取决于内部的那个Promise执行的状态的成功与否,
PromiseResult的值是内部的Promise执行的值。
这一点在调用多个then方法时很重要!
Promise.prototype.catch
方法:(onReject) => {} 失败的回调
Promise.resolve
方法 : (value)=> {}
- value成功的数据或promise对象
说明:返回一个成功/失败的promise对象
若传入的参数不是Promise类型的参数,返回的结果为成功
若传入的参数是一个Promise类型的参数,返回的结果取决于参数的结果
Promise.resolve()方法是静态方法,
不处于实例身上而处于Promise自身上
使用:
// 传入的参数为123,是一个非Promise类型的参数,那么返回的结果为成功的Promise对象
let p = Promise.resolve(123)
// p是一个Promise对象,PromiseState为成功,PromiseResult为123
// 传入的参数为Promise对象,那么参数的结果决定了 resolve 的结果
let p1 = Promise.resolve(new Promise((resolve,reject)=> {
resolve() //参数的返回结果为成功,那么p1的结果也为成功
}))
let p2 = Promise.resolve(new Promise((resovle,reject) => {
reject() //参数的返回结果为失败,那么p2的结果也为失败
}))
Promise.reject
方法:(reason)=> {}
- reason:失败的原因
说明:无论传入什么参数,都返回一个失败的promise对象
Promise.reject()方法是静态方法,
不处于实例身上而处于Promise自身上
使用:
// 传入非Promise类型的参数,返回失败
let p = Promise.reject(123)
let p1 = Promise.reject('codeMak1r.')
// p是一个Promise对象,PromiseState为失败,PromiseResult为123
// p1是一个Promise对象,PromiseState为失败,PromiseResult为codeMak1r.
// 传入的参数为成功的Promise对象,p2结果依然是失败
let p2 = Promise.resolve(new Promise((resolve,reject)=> {
resolve() //参数的返回结果为成功
}))
Promise.all
方法:(promises)=> {}
- promises:包含n个 promise 数组
说明:返回一个新的 promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败
成功的结果为所有成功的Promise的结果组成的数组;
失败的结果为失败的那个Promise的结果。
=分割线=
注意⚠️:
传入的多个Promise返回失败情况下,all方法返回的Promise结果也为失败;
且失败的值为传入的Promise中,第一个失败的Promise的结果
Promise都返回成功
let p1 = new Promise((resolve, reject) => {
resolve('OK')
})
let p2 = Promise.resolve('Success!')
let p3 = Promise.resolve('Oh Yeah')
const result = Promise.all([p1, p2, p3])
console.log(result)
// 打印台显示:
// result为Promise对象,PromiseState为成功,
// PromiseResult为一个数组,数组由p1,p2,p3成功的结果组成
Promise返回失败
let p1 = new Promise((resolve, reject) => {
resolve('OK')
})
let p2 = Promise.resolve('Success!')
let p3 = Promise.reject('Oh No')
// p3为失败的Promise
const result = Promise.all([p1, p2, p3])
console.log(result)
// 打印台显示:
// result为Promise对象,PromiseState为失败,
// PromiseReault为p3的结果:Oh No
Promise.race
方法:(promises)=> {}
- promises:包含n个 promise 的数组
说明:返回一个新的promise,第一个完成的promise 的结果状态就是最终的结果状态。
let p1 = new Promise((resolve, reject) => {
resolve('OK')
})
// p1最先完成,输出p1的结果状态::成功
// 输出p1 的结果值: OK
let p2 = Promise.resolve('Success')
let p3 = Promise.resolve('Oh Yeah')
const result = Promise.race([p1, p2, p3])
console.log(result)
// 打印台显示:
// result为Promise对象,PromiseState为成功,
// PromiseResult为p1的结果:OK
let p1 = new Promise((resolve, reject) => {
// p1 1s后才返回状态
setTimeout(() => {
resolve('OK')
}, 1000)
})
let p2 = Promise.resolve('Success')
let p3 = Promise.resolve('Oh Yeah')
const result = Promise.race([p1, p2, p3])
console.log(result)
// 打印台显示:
// result为Promise对象,PromiseState为成功,
// PromiseResult为p2的结果:Success
let p1 = new Promise((resolve, reject) => {
// p1 1s后才返回状态
setTimeout(() => {
resolve('OK')
}, 1000)
})
let p2 = Promise.reject('ERROR') // p2返回状态为失败
let p3 = Promise.resolve('Oh Yeah')
const result = Promise.race([p1, p2, p3])
console.log(result)
// 打印台显示:
// result为Promise对象,PromiseState为失败,
// PromiseResult为p2的结果:ERROR
Promise.race()方法就像race词意“赛跑”一样,传入作为参数的不同Promise之间赛跑。
看谁先返回状态结果,就拿谁的结果作为race()方法的结果。
在最后呢,就用一个表格来汇总Promise对象上都有哪些API吧😎~
Promise_API | 使用 |
---|---|
Promise 构造函数: Promise(excutor) {} | 用来创建Promise对象 |
Promise.prototype.then:(onResolved,onRejected) => {} | 用来得到成功和失败的回调 |
Promise.prototype.catch方法:(onReject) => {} | 失败的回调 |
Promise.resolve方法 : (value)=> {} | 返回一个成功或失败的Promise |
Promise.reject方法:(reason)=> {} | 返回一个失败的Promise |
Promise.all方法:(promises)=> {} | 见说明 |
Promise.race方法:(promises)=> {} | 见说明 |
关于Promise的API方法就给诸佬们分享到这了🤓。
Promise对象的小Tips📑诸佬有没有get✅呢?
创作不易,还烦请诸佬能够三连支持✨
👉关注✨点赞👍收藏📂