JavaScript--【Promise】详解Promise_API

前言

📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是React框架，中间夹杂了一些基础知识的回顾⌨️
🌈博客主页👉codeMak1r.的博客
👉关注✨点赞👍收藏📂

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

前面我们详解了Promise对象的基本概念和使用👉点我查看Promise详解，这篇文章将为大家介绍Promise对象身上都有哪些API呢？又将如何使用呢？

🍭 Promise属性

✨ 1. PromiseState

Promise实例对象身上有一个属性叫做：【PromiseState】代表promise的状态。
【PromiseState】有三种值，分别是：
【pending（未定义）】，创建promise对象时处于此状态。
【resolved（成功）】，Promise事件成功时的状态。
【rejected（失败）】，Promise事件失败时的状态。

✨ 2. PromiseResult

实例对象的另一个属性 【PromiseResult】 ： 对象成功或者失败的结果
只有【resolve】和【reject】这两个函数可以修改PromiseResult的值。

👨🏻‍💻 Promise基本流程

🌟 Promise_API

1. Promise 构造函数： Promise(excutor) {}

   1. excutor 函数： 执行器（resolve，reject）=>{}
   2. resolve 函数：内部定义成功时我们调用的函数 (value) => {}
   3. reject 函数：内部定义失败时我们调用的函数 (reason) => {}

   说明：excutor 会在 Promise内部立即同步调用，异步操作在执行器中执行。

2. Promise.prototype.then方法：（onResolved,onRejected） => {}

   1. onResolved 函数：成功的回调函数 （value） => {}
   2. 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方法时很重要！

3. Promise.prototype.catch方法：（onReject） => {} 失败的回调

4. Promise.resolve方法 ： （value）=> {}

   1. 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的结果也为失败
}))

5. Promise.reject方法：（reason）=> {}

   1. 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()  //参数的返回结果为成功
}))

6. Promise.all方法：（promises）=> {}

   1. 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

7. Promise.race方法：（promises）=> {}

   1. 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✅呢？
创作不易，还烦请诸佬能够三连支持✨
👉关注✨点赞👍收藏📂