es6学习笔记 Promise

Posted on | In ,

promise

Promise 代表着一个承诺。作为承诺，总需要有一个结果，无论成功与否。如果成功，我们会获得需要的结果；当然也有可能会失败。因此我们需要在这个承诺在未来某个时刻有结果时，分别针对结果的成功或失败做相应的处理。因此 Promise 中提供了then方法来完成这个任务。
then方法接收两个参数：onResolve和onReject，分别代表当前 promise 对象在成功或失败时，接下来需要做的操作。现实生活中，人们总系喜欢给出各种许诺，同样在代码的世界里，我们也经常会有一连串前后依赖的 promise 需要执行，如下面的调用方式：promise.then().then()…。因此为了方便链式调用，then方法的实现中，都会 返回一个新的 promise 对象，就像 jQuery 的方法中一般都会将自己（this）返回一样（不同的是，jQuery中返回的是自身，但在 Promise 中，返回的是一个 新的 promise 对象。如果此处也返回自身的话，则串行操作就变成并行操作了，显然不符合我们的目标）。

  • 状态
    • pending 等待态
    • fullfilled 执行态
    • rejected 拒绝态

  • then方法

    • 参数 [onFulfilled, onRejected]
    • 若参数不是函数将会被忽略
    • 回调顺序
      • 当 promise 成功执行时，所有 onFulfilled 需按照其注册顺序依次回调
      • 当 promise 被拒绝执行时，所有的 onRejected 需按照其注册顺序依次回调
    • 返回值
      • 一个新的promise对象

    • 例子

      1
      promise2 = promise1.then(onFulfilled, onRejected);

      即只要promise1传入了 onFulfilled 和 onRejected 回调且没有异常，无论是reject还是resolve，其任何结果都会传输给promise2作为参数并成功执行。但如果1没有传入onrejected回调，1 reject是2也会被reject

      • 如果 onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须拒绝执行，并返回拒因 e
      • 如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值
      • 如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须 拒绝执行并返回相同的据因

Promises/A+
翻译
实现原理

promise.all & promise.race

用promise封装图片的预加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 预处理图片
  function preLoadImg(source){
      let pr = [];
      source.forEach(url => {// 预加载图片
          let p = loadImage(url)
                  .then(img => this.images.push(img))
                  .catch(err => console.log(err))
          pr.push(p);
      })
      // 图片全部加载完
      Promise.all(pr)
              .then(() => {
                  // do sth
              });
  }
  // 预加载图片
  function loadImage(url) {
      return new Promise((resolve, reject) => {
          let img = new Image();
          img.onload = () => resolve(img);
          img.onerror = () => reject(err);
          img.src = url;
      })
  }