Promise的理解和使用

Promise是什么?

• 抽象表达:
  • Promise是JS中进行异步编程的新的解决方案(旧的是谁?)
• 具体表达:
  • 从语法上来说: Promise是一个构造函数
  • 从功能上来说: promise对象用来封装一个异步操作并可以获取其结果
• promise的状态改变(只有2种, 只能改变一次)
  • pending变为resolved
  • pending变为rejected

• promise的基本流程

  为什么要用Promise?

• 指定回调函数的方式更加灵活: 可以在请求发出甚至结束后指定回调函数

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

  如何使用Promise?

• 主要API

  • Promise构造函数: Promise (excutor) {}
  • Promise.prototype.then方法: (onResolved, onRejected) => {}
    • 方法返回一个 Promise
    • 它最多需要有两个参数：Promise 的成功和失败情况的回调函数
  • Promise.prototype.catch方法: (onRejected) => {}
    • 方法返回一个Promise
    • 并且处理拒绝的情况
  • Promise.resolve方法: (value) => {}
  • Promise.reject方法: (reason) => {}
    • 返回一个带有拒绝原因的Promise对象
  • Promise.all方法: (promises) => {}
  • Promise.race方法: (promises) => {}

• 几个重要问题

  • 如何改变promise的状态?
    • resolve函数
    • resolve(‘ok’); // pending => fulfilled（resolved）
    • reject函数
    • reject(‘error’); // pending => rejected
    • 抛出错误
    • throw ‘出问题了’;
  • 一个promise指定多个成功/失败回调函数, 都会调用吗?
  • promise.then()返回的新promise的结果状态由什么决定?
  • 改变promise状态和指定回调函数谁先谁后?
  • promise如何串连多个操作任务?
  • promise异常传(穿)透?
  • 中断promise链

    自定义Promise

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

     async与await

• async 函数

  • 函数的返回值为promise对象
  • promise对象的结果由async函数执行的返回值决定
• await 表达式
  • await右侧的表达式一般为promise对象, 但也可以是其它的值
  • 如果表达式是promise对象, await返回的是promise成功的值
  • 如果表达式是其它值, 直接将此值作为await的返回值

• 注意:

  • await必须写在async函数中, 但async函数中可以没有await
  • 如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理

    JS异步之宏队列与微队列

• 宏列队: 用来保存待执行的宏任务(回调), 比如: 定时器回调/DOM事件回调/ajax回调

• 微列队: 用来保存待执行的微任务(回调), 比如: promise的回调/MutationObserver的回调
• JS执行时会区别这2个队列
  • JS引擎首先必须先执行所有的初始化同步任务代码
  • 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行