关于javascript:Promise深入-自定义Promise

2次阅读

共计 1645 个字符,预计需要花费 5 分钟才能阅读完成。

1. 筹备

1.1. 函数对象与实例对象

  • 函数对象: 将函数作为对象应用时, 简称为函数对象
  • 实例对象: new 函数产生的对象, 简称为对象

1.2. 回调函数的分类

  • 同步回调:

    • 了解: 立刻执行, 齐全执行完了才完结, 不会放入回调队列中
    • 例子: 数组遍历相干的回调函数 / Promise 的 excutor 函数
  • 异步回调:

    • 了解: 不会立刻执行, 会放入回调队列中未来执行
    • 例子: 定时器回调 / ajax 回调 / Promise 的胜利 | 失败的回调

1.3. JS 中的 Error

  • 谬误的类型

    • Error: 所有谬误的父类型
    • ReferenceError: 援用的变量不存在
    • TypeError: 数据类型不正确的谬误
    • RangeError: 数据值不在其所容许的范畴内
    • SyntaxError: 语法错误
  • 错误处理

    • 捕捉谬误: try … catch
    • 抛出谬误: throw error
  • 谬误对象

    • message 属性: 谬误相干信息
    • stack 属性: 函数调用栈记录信息

2.Promise 的了解和应用

2.1. Promise 是什么?

  • 形象表白:

    • Promise 是 JS 中进行异步编程的新的解决方案(旧的是谁?)
  • 具体表白:

    • 从语法上来说: Promise 是一个构造函数
    • 从性能上来说: promise 对象用来封装一个异步操作并能够获取其后果
  • promise 的状态扭转(只有 2 种, 只能扭转一次)

    • pending 变为 resolved
    • pending 变为 rejected
  • promise 的根本流程

2.2. 为什么要用 Promise?

  • 指定回调函数的形式更加灵便: 能够在申请收回甚至完结后指定回调函数
  • 反对链式调用, 能够解决回调天堂问题

2.3. 如何应用 Promise?

  • 次要 API

    • Promise 构造函数: Promise (excutor) {}
    • Promise.prototype.then 办法: (onResolved, onRejected) => {}
    • Promise.prototype.catch 办法: (onRejected) => {}
    • Promise.resolve 办法: (value) => {}
    • Promise.reject 办法: (reason) => {}
    • Promise.all 办法: (promises) => {}
    • Promise.race 办法: (promises) => {}
  • 几个重要问题

    • 如何扭转 promise 的状态?
    • 一个 promise 指定多个胜利 / 失败回调函数, 都会调用吗?
    • promise.then()返回的新 promise 的后果状态由什么决定?
    • 扭转 promise 状态和指定回调函数谁先谁后?
    • promise 如何串连多个操作工作?
    • promise 异样传 (穿) 透?
    • 中断 promise 链

3. 自定义 Promise

  • 定义整体构造
  • Promise 构造函数的实现
  • promise.then()/catch()的实现
  • Promise.resolve()/reject()的实现
  • Promise.all/race()的实现
  • Promise.resolveDelay()/rejectDelay()的实现
  • ES6 class 版本

4.async 与 await

  • async 函数

    • 函数的返回值为 promise 对象
    • promise 对象的后果由 async 函数执行的返回值决定
  • await 表达式

    • await 右侧的表达式个别为 promise 对象, 但也能够是其它的值
    • 如果表达式是 promise 对象, await 返回的是 promise 胜利的值
    • 如果表达式是其它值, 间接将此值作为 await 的返回值
  • 留神:

    • await 必须写在 async 函数中, 但 async 函数中能够没有 await
    • 如果 await 的 promise 失败了, 就会抛出异样, 须要通过 try…catch 来捕捉解决

5.JS 异步之宏队列与微队列

  • 宏列队: 用来保留待执行的宏工作(回调), 比方: 定时器回调 /DOM 事件回调 /ajax 回调
  • 微列队: 用来保留待执行的微工作(回调), 比方: promise 的回调 /MutationObserver 的回调
  • JS 执行时会区别这 2 个队列

    • JS 引擎首先必须先执行所有的初始化同步工作代码
  • 每次筹备取出第一个宏工作执行前, 都要将所有的微工作一个一个取出来执行
正文完
 0