Promise从入门到精通 (第2章 Promise的理解和使用)

Promise从入门到精通 (第2章 Promise的理解和使用)

  • 第二章 Promise的理解和使用
    • 2.1 Promise 的状态 - PromiseState
    • 2.2 Promise的状态改变
    • 2.3 Promise 对象的值 - PromiseResult
    • 2.4 promise的基本流程
    • 2.5 如何使用Promise?
      • 2.5.1 API
    • 2.6 Promise.resolve方法
    • 2.7 Promise.reject方法
    • 2.8 Promise.all方法
    • 2.9 Promise.race方法
    • 2.10 promise 的几个关键问题
      • 2.10.1 改变Promise状态的三种方式
      • 2.10.2 一个 promise 指定多个成功/失败回调函数, 都会调用吗?
      • 2.10.3 改变 promise 状态和指定回调函数执行谁先谁后?
      • 2.10.4 promise.then()返回的新 promise 的结果状态由什么决定?
      • 2.10.5 promise 如何串连多个操作任务?
      • 2.10.6 promise 异常传透?
      • 2.10.7 如何中断 promise 链?

第二章 Promise的理解和使用

2.1 Promise 的状态 - PromiseState

实例对象中的一个属性 『PromiseState』,此属性是内置的,我们不能对此属性做操作

三种可能的值:

  • 1.pending 未决定的( 初始化的默认值 )
  • 2.resolved / fullfilled 成功
  • 3.rejected 失败

2.2 Promise的状态改变

Promise的状态改变只有以下两种可能

  1. 由最初始状态pending变为 resolved状态

  2. 由最初始状态pending 变为 rejected状态

说明: 只有这 2 种, 且一个 promise 对象只能改变一次,

无论变为成功还是失败, 都会有一个结果数据

成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

2.3 Promise 对象的值 - PromiseResult

实例对象中的另一个属性 『PromiseResult』
保存着异步任务『成功/失败』的结果

  • 只有resolve函数 和 reject 函数能够对实例对象中的PromiseResult进行修改

2.4 promise的基本流程

Promise从入门到精通 (第2章 Promise的理解和使用)_第1张图片

首先通过new Promise()创建一个对象,在Promise封装异步操作,如果异步操作执行成功,则执行resolve()函数,然后resolve会将状态改为成功,然后调用then方法时会调用第一个回调函数,然后返回一个新的Promise对象(then方法的返回结果也是一个新的Promise对象)

如果异步操作失败了,则执行reject函数,reject函数会将状态改为失败,然后调用then方法时会调用第二个回调函数,然后返回一个新的Promise对象。

2.5 如何使用Promise?

2.5.1 API

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

​ (1) executor 函数: 执行器 (resolve, reject) => {}

​ (2) resolve 函数: 内部定义成功时我们调用的函数 value => {}

​ (3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

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

  1. Promise.prototype.then 方法: (onResolved, onRejected) => {}

​ (1) onResolved 函数: 成功的回调函数 (value) => {}

​ (2) onRejected 函数: 失败的回调函数 (reason) => {}

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

  1. Promise.prototype.catch 方法: (onRejected) => {}

​ (1) onRejected 函数: 失败的回调函数 (reason) => {}

    <script>
       const p = new Promise((resolve, reject)=>{
   
            // 调用reject
            reject("err")
        });
        p.catch(reason=>{
   
            console.log(reason);
        })
    </script>

2.6 Promise.resolve方法

  1. Promise.resolve 方法: (value) => {}

​ (1) value: 成功的数据或 promise 对象

​ 说明: 返回一个成功/失败的 promise 对象

Promise.resolve是Promise函数对象的,并不属于实例对象,此方法接收一个参数,返回一个成功或失败的Promise对象

作用:为了快速得到一个Promise对象,可以封装一个值,将值转换为Promise对象

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        // 如果传入的参数为 非Promise类型的对象,则返回的结果为成功的Promise对象
        let p1 = Promise

你可能感兴趣的:(#,Promise,javascript,原型模式,前端)