简单明了的Promise基本知识点

目隐中人
136 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

前言

Promise相比大家都不陌生，都能说出几个状态几个方法，可是你真的了解Promise吗？

本文将带领大家一探究竟

Promise基础知识

Promise是什么？

Promise是javascript中进行异步编程的新解决方案

  1. 从语法上来说：Promise是一个构造函数
  2. 从功能上来说：Promise是一个对象，用来封装一个异步操作并可以获取其成功/失败的结果值。

既然是对象,那么他具有哪些属性？

image-20220725091011845.png

如上图，我们显示得声明了一个Promise对象并打印，发现除了原型外还具有俩个属性：

PromiseState：

  • PromiseState代表着Promise的执行状态，一共有三种状态：

    • pending（初始状态）、fulfilled(操作成功) 、rejected（操作失败）。

  • PromiseState值默认为pending，值一旦经过改变就不能再修改了。

  • promise的状态只可能发生以下几种情况：

    • pending => resolved
    • pending => rejected

PromiseResult:

  • 该属性存储的是异步任务成功/失败的结果。

  • 能修改该属性的方法只有两个：

    • resolve
    • reject

resolve,reject方法是？

  • resolve和reject作为Promise对象实例的内置函数，都是用来修改promise的执行状态

    • 运行resolve方法，仅在状态PromiseState值为'pending'时改变为’fulfilled‘

      • 即’pending‘ (👉ﾟヮﾟ)👉’fulfilled‘

    • 通过then方法来劫持被resolve方法改变为'fulfilled'的promise，并运行then方法中第一个参数

    • 运行reject方法，仅在状态PromiseState值为'pending'时改变为’rejected‘

      • 即’pending‘ (👉ﾟヮﾟ)👉’rejected‘

    • 通过then方法来劫持被reject方法改变为'fulfilled'的promise，并运行then方法中第二个参数。或通过catch方法挟持。

then方法是？如何运行的呢？

  • then方法用于捕捉执行后的Promise对象

  • then方法接受一个高阶函数为参数

    • then（(onFufulfilled,onRejected)=>{}）

      • 其中第一个参数onFufulfilled为状态为fulfilled(操作成功) 时执行的函数
      • 其中第二个参数onRejected为状态为rejected（操作失败 时执行的函数
      • 当运行的Promise状态为pending时，会将函数参数保存到执行队列中，等待状态改变后执行

Promise 如何运作

Promise是如何运行的呢？本人粗略的制作了下图，代表了Promise的一个生命周期

vpPKUJ.png

  1. 当 promise 被创建后，它会以处理中状态 (pending) 开始。 这意味着调用的函数会继续执行，而 promise 仍处于处理中直到解决为止，从而为调用的函数提供所请求的任何数据。
  2. 被创建的 promise 最终会以被解决状态 (fulfilled) 或 被拒绝状态 (rejected) 结束，并在完成时调用相应的回调函数（传给 then 和 catch）。
  3. then方法处理后会返回一个新的promise对象，用于后续的链式调用。

使用Promise

Promise API 公开了一个 Promise 构造函数，可以使用 new Promise() 对其进行初始化：

let a = 0
const firstPromise = new Promise((resolve,reject)=>{
    a ++
    resolve(a)
    a++
    reject(a)
}).catch((err)=>{
    console.log(err)
})
firstPromise.then((res)=>{
    console.log(res)
})
console.log(a) 
//output:2
//output:1

如上代码中，

  • 实例化Promise对象中传递的函数参数会立即执行
  • then方法中的函数会添加到异步队列中在同步队列执行完毕后再执行，因此会按顺序打印出 2，1
  • 状态一经更改便不会再次更改，所以reject(a)其实并没有起作用

尾声

以上为Promise对象基本属性以及方法的介绍，推荐下一篇文章《实现一个基本的Promise类》

avatar
文章
阅读
粉丝