ES6-Promise + Iterator 简单总结

Promise

1. 定义：包含异步操作结果的对象
2. 状态

• 进行中：pending
• 已成功：resolved
• 已失败：rejected
• 

3. 特点

• 对象的状态不受外界影响
• 一旦状态改变就不会再变，任何时候都可得到这个结果

4. 声明：new Promise((resolve, reject) => {})
5. 出参

• resolve：将状态从未完成变为成功，在异步操作成功时调用，并将异步操作的结果作为参数传递出去
• reject：将状态从未完成变为失败，在异步操作失败时调用，并将异步操作的错误作为参数传递出去

6. 方法

• then()：分别指定resolved状态和rejected状态的回调函数
  第一参数：状态变为resolved时调用
  第二参数：状态变为rejected时调用(可选)

• catch()：指定发生错误时的回调函数

• Promise.all()：将多个实例包装成一个新实例，返回全部实例状态变更后的结果数组(齐变更再返回)
  入参：具有Iterator接口的数据结构
  成功：只有全部实例状态变成fulfilled，最终状态才会变成fulfilled
  失败：其中一个实例状态变成rejected，最终状态就会变成rejected

• Promise.allSettled()：将多个实例包装成一个新实例，返回全部实例状态变更后的结果数组（全部执行后返回）
  我们不关心异步操作的结果，只关心这些操作有没有结束。使用 Promise.allSettled()

• Promise.race()：将多个实例包装成一个新实例，返回全部实例状态优先变更后的结果(先变更先返回)
  入参：具有Iterator接口的数据结构
  成功失败：哪个实例率先改变状态就返回哪个实例的状态

• Promise.resolve()：将对象转为Promise对象(等价于new Promise(resolve => resolve()))
  Promise实例：原封不动地返回入参
  Thenable对象：将此对象转为Promise对象并返回(Thenable为包含then()的对象，执行then()相当于执行此对象的then())
  不具有then()的对象：将此对象转为Promise对象并返回，状态为resolved
  不带参数：返回Promise对象，状态为resolved

• Promise.any(): 将多个实例包装成一个新实例，返回全部实例状态优先变更后的结果(先变更先返回，但实例状态为rejected时不会结束)

• Promise.reject()：将对象转为状态为rejected的Promise对象(等价于new Promise((resolve, reject) => reject()))

应用场景
加载图片
AJAX转Promise对象

注意的点

：
只有异步操作的结果可决定当前状态是哪一种，其他操作都无法改变这个状态

状态改变只有两种可能：从pending变为resolved、从pending变为rejected

一旦新建Promise对象就会立即执行，无法中途取消

不设置回调函数，内部抛错不会反应到外部

当处于pending时，无法得知目前进展到哪一个阶段

实例状态变为resolved或rejected时，会触发then()绑定的回调函数

resolve()和reject()的执行总是晚于本轮循环的同步任务

then()返回新实例，其后可再调用另一个then()

then()运行中抛出错误会被catch()捕获

reject()的作用等同于抛出错误

实例状态已变成resolved时，再抛出错误是无效的，不会被捕获，等于没有抛出

实例状态的错误具有冒泡性质，会一直向后传递直到被捕获为止，错误总是会被下一个catch()捕获

不要在then()里定义rejected状态的回调函数(不使用其第二参数)

建议使用catch()捕获错误，不要使用then()第二个参数捕获

没有使用catch()捕获错误，实例抛错不会传递到外层代码，即不会有任何反应

作为参数的实例定义了catch()，一旦被rejected并不会触发Promise.all()的catch()

Promise.reject()的参数会原封不动地作为rejected的理由，变成后续方法的参数

Iterator

1. 定义：为各种不同的数据结构提供统一的访问机制
2. 原理：创建一个指针指向首个成员，按照次序使用next()指向下一个成员，直接到结束位置(数据结构只要部署Iterator接口就可完成遍历操作)
3. 作用

• 为各种数据结构提供一个统一的简便的访问接口
• 使得数据结构成员能够按某种次序排列
• ES6创造了新的遍历命令for-of，Iterator接口主要供for-of消费

4. 形式：for-of(自动去寻找Iterator接口)
5. 数据结构

• 集合：Array、Object、Set、Map
• 原生具备接口的数据结构：String、Array、Set、Map、TypedArray、Arguments、NodeList

6. 部署：默认部署在Symbol.iterator(具备此属性被认为可遍历的iterable)
7. 遍历器对象

• next()：下一步操作，返回{ done, value }(必须部署)
• return()：for-of提前退出调用，返回{ done: true }
• throw()：不使用，配合Generator函数使用
  
  forOf循环

1. 定义：调用Iterator接口产生遍历器对象(for-of内部调用数据结构的Symbol.iterator())
2. 遍历字符串：for-in获取索引，for-of获取值(可识别32位UTF-16字符)
3. 遍历数组：for-in获取索引，for-of获取值
4. 遍历对象：for-in获取键，for-of需自行部署
5. 遍历Set：for-of获取值 => for (const v of set)
6. 遍历Map：for-of获取键值对 => for (const [k, v] of map)
7. 遍历类数组：包含length的对象、Arguments对象、NodeList对象(无Iterator接口的类数组可用Array.from()转换)
8. 计算生成数据结构：Array、Set、Map

keys()：返回遍历器对象，遍历所有的键
values()：返回遍历器对象，遍历所有的值
entries()：返回遍历器对象，遍历所有的键值对

9. 与for-in区别

有着同for-in一样的简洁语法，但没有for-in那些缺点、
不同于forEach()，它可与break、continue和return配合使用
提供遍历所有数据结构的统一操作接口