ES6中新增的promise异步编程解决方案

2023-06-12,,

promise异步编程解决方案

第1章 准备

1.1 区别实例对象与函数对象

(1).实例对象:通过    new 函数    产生的对象,称为实例对象,简称对象

(2).函数对象:将函数作为对象使用时,简称函数对象

1.2 两种类型的回调函数

(1). 同步回调: 
      理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
      例子: 数组遍历相关的回调函数 / Promise的excutor函数
(2). 异步回调: 
      理解: 不会立即执行, 会放入回调队列中将来执行
      例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调
 

1.3 JS的 error 处理

(1)  错误的类型
 
    1. Error:所有错误的父类型
    2. ReferenceError:引用的变量不存在
    3. RangeError:数据值不在其所允许的范围内
    4. SyntaxError:语法错误
 

 
(2)  错误的处理

    捕获错误:try...catch
    抛出错误:throw error

第2章 promise的理解和使用

2.1 promise是什么?

2.1.1 理解

  1.抽象表达:
    Promise是JS中进行异步编程的新的解决方案

  2.具体表达
    从语法上来说:Promise是一个构造函数
    从功能上来说:promise对象用来封装一个异步操作并可以获取其结果
 
2.1.2 promise的状态改变
  1. pending 变为 resolved
  2. pending 变为 rejected
  说明:只有这2种,且一个promise对象只能改变一次
      无论变为成功还是失败,都会有一个结果数据
      成功的结果数据一般称为 value,失败的结果数据一般称为 reason
 
2.1.3 promise的基本流程

2.1.4 promise的基本使用

2.2 为什么要用Promise?

2.2.1 指定回调函数的方式更加灵活

  1.旧的方案:必须在启动异步任务前指定

  2.promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

2.2.2 支持链式调用,可以解决回调地狱问题

  1.什么是回调地狱?

    回调函数嵌套调用,外部回调函数异步执行结果是嵌套的回调执行的条件

  2.回调地狱的缺点?

    不方便阅读

    不便于异常处理

  3.解决方案?

    promise 链式调用

  4.终极解决方案?

    async / await

2.3 如何使用promise

2.3.1 API

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

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

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

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

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

      2. Promise.prototype.then方法: (onResolved, onRejected) => {}
          onResolved函数: 成功的回调函数  (value) => {}
          onRejected函数: 失败的回调函数 (reason) => {}
          说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调
                返回一个新的promise对象

      3. Promise.prototype.catch方法: (onRejected) => {}
          onRejected函数: 失败的回调函数 (reason) => {}
          说明: then()的语法糖, 相当于: then(undefined, onRejected)
 

      4. Promise.resolve方法: (value) => {}
          value: 成功的数据或promise对象
          说明: 返回一个成功/失败的promise对象

      5. Promise.reject方法: (reason) => {}
          reason: 失败的原因
          说明: 返回一个失败的promise对象

      6. Promise.all方法: (promises) => {}
          promises: 包含n个promise的数组
          说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败

      7. Promise.race方法: (promises) => {}
          promises: 包含n个promise的数组
          说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态
 

2.3.2 promise的几个关键问题

  1.  如何改变promise的状态?
        (1)resolve(value): 如果当前是pendding就会变为resolved
        (2)reject(reason): 如果当前是pendding就会变为rejected
        (3)抛出异常: 如果当前是pendding就会变为rejected
    
     2.  一个promise指定多个成功/失败回调函数, 都会调用吗?
        当promise改变为对应状态时都会调用
 

  3.改变promise状态和指定回调函数谁先谁后?
        (1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
        (2) 如何先改状态再指定回调?
            ①在执行器中直接调用resolve() / reject()
            ②延迟更长时间才调用then()
        (3)什么时候才能得到数据?
            ①如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
            ②如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
 
        
 

     4.  promise.then()返回的新promise的结果状态由什么决定?
          (1)简单表达: 由then()指定的回调函数执行的结果决定
          (2)详细表达:
            ①如果抛出异常, 新promise变为rejected, reason为抛出的异常
            ②如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值
            ③如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果 
 

  5.promise如何串连多个操作任务?
        (1) promise的then()返回一个新的promise, 可以看成then()的链式调用
        (2) 通过then的链式调用串连多个同步/异步任务

 
   6.promise异常传 / 穿透?
        (1)当使用promise的then链式调用时, 可以在最后指定失败的回调, 
        (2)前面任何操作出了异常, 都会传到最后失败的回调中处理
 
   7.中断promise链?
        (1)当使用promise的then链式调用时, 在中间中断, 不再调用后面的回调函数
        (2)办法: 在回调函数中返回一个pendding状态的promise对象
 

ES6中新增的promise异步编程解决方案的相关教程结束。

《ES6中新增的promise异步编程解决方案.doc》

下载本文的Word格式文档,以方便收藏与打印。