JavaScript--【Promise】详解Promise_API

     阅读:135

前言

📔博主是一名大学在读本科生,主要学习方向是前端😊。
🍭目前已经更新了【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的结果也为失败
}))
  1. 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()  //参数的返回结果为成功
}))
  1. 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
  1. 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✅呢?

创作不易,还烦请诸佬能够三连支持✨
👉关注✨点赞👍收藏📂