ES6 Promise（1）

ES6学习 本文总阅读量次

复习：同步与异步

  • 同步任务会阻塞程序执行（alert、for、…）
  • 异步任务不会阻塞程序执行（setTimeout、fs.readFile、…）
  • 可参考笔记异步与单线程中的例子来帮助理解。

Promise对象

Promise对象用于表示一个异步操作的最终状态（完成或失败）以及其返回的值。–MDN

  • Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
  • 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

Promise对象三种状态和特点

  1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。**(后面的resolved统一只指fulfilled状态，不包含rejected状态。)**
  2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled 或 从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

缺点：

  1. Promise 新建后就会立即执行，无法中途取消。
  2. 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
  3. 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

更多资料可参考阮一峰《ES6入门》中关于“promise”的描述、MDN“使用promise”

Promise()构造函数

  • ES6 规定，** Promise()是一个构造函数，用来生成Promise实例**
  • Promise()的参数是一个回调函数，一般我们在这个回调函数中放置异步任务，这个回调函数又接收两个回调函数（resolve和reject）作为参数，当**异步任务成功时执行回调函数resolve**，当异步任务失败是执行回调函数reject。
  • Promise()新建后就会立即执行
  • then方法的参数（回调函数）将在当前脚本所有同步任务执行完才会执行
  • 注意，调用resolve()或reject()并不会终结 Promise 的参数函数的执行。
  • 注意：在Promise构造函数的内部，执行顺序是同步的。等内部执行完成后，再选择调用then或catch方法，then方法执行是异步的。在事件循环中要注意执行顺序。（可以参考笔记[ES6 Promise（3）]）

参数resolve和reject

  • Promise构造函数接收一个函数作为参数，该函数的两个参数 分别是**resolve和reject**，它们 也是两个函数 ，由 JavaScript 引擎提供，不用自己部署。
    【参数名可自定义，resolve和reject是约定俗成的参数名】
  • resolve()或reject()总是晚于本轮循环的同步任务。
  • resolve()使Promise对象的状态从 pending 变为 resolved。而reject()使Promise对象的状态从 pending 变为 rejected。状态一旦改变就不可逆转。
  • 可以**通过resolve()或reject()传参给then()或catch（）**。
    • （异步操作放在Promise的参数函数中）
    • 当Promise的参数函数中保存的异步操作成功，则可以调用resolve()将获取到的数据通过参数传递给then()的第一个参数函数。
    • 如果异步操作失败，则可以调用reject()将错误信息通过参数传递给then()的第二个参数函数/catch()的参数函数。
  • 一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then或catch方法里面，而不应该直接写在resolve或reject的后面。所以，最好在resolve或reject前面加上return语句，这样函数就结束了，后面语句自然也就不会执行了（return resolve();）。

帮助理解resolve()和reject()

  • 调用resolve()或reject()并不会终结 Promise 的参数函数的执行。
  • 但是调用resolve()时会将 Promise 对象的状态（即Promise的参数函数中的异步操作）会从“未完成”变为“成功”（即从 pending 变为 resolved），那么then()方法的第一参数（函数）就会执行。
    • 调用resolve()时可将异步操作获取到的数据通过传参给then()方法的第一参数函数。
  • 而调用reject()时会将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），那么then()方法的第二参数（函数）或者catch()就会执行。
    • 调用reject()将错误信息通过参数传递给then()的第二个参数函数/catch()的参数函数。
  • 也就是说，调用resolve()或reject()不会终结 Promise 的参数函数的执行,但它可以告诉我们接下来运行then()还是catch()，所以为了防止resolve()或reject()后面的函数还继续执行，最好在resolve或reject前面加上return语句，这样函数就结束了，后面语句自然也就不会执行了（return resolve();）。

resolve函数：

  1. 在异步操作成功时调用，并将 异步操作的结果 作为 参数 传递出去。
  2. 作用：是将Promise对象的状态从“未完成”变为“成功”（即**从 pending 变为 resolved**）。
  3. 可传参，通过resolve()传递的参数会在then()的第一个参数（函数）中接收到。（但只能传递一个参数）

reject函数：

  1. 在异步操作失败时调用，并将 异步操作报出的错误 作为 参数 传递出去。
  2. 作用：将**Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected**）。
  3. 可传参，通过 reject()传递的参数会在then()的第二个参数（函数）/catch()中接收到。（但只能传递一个参数）

例子

下面代码创造了一个Promise实例:

1
2
3
4
5
6
7
8
9
const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

加上then方法

Promise实例生成以后，可以用**then方法分别指定resolved状态和rejected状态的回调函数**:

1
2
3
4
5
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

例子:Promise 新建后立即执行

Promise 新建后就会立即执行:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，**then方法的参数（回调函数）将在当前脚本所有同步任务执行完才会执行**，所以resolved最后输出。

例子:Promise对象的then()

下面是一个Promise对象的简单例子:

1
2
3
4
5
6
7
8
9
10
11
function timeout(ms) {
  return new Promise((resolve, reject) => {
    //ms毫秒之后调用resolve函数并将参数`"done"`传给`resolve`函数
    setTimeout(resolve(), ms, 'done');
  });
}

//then的第一个参数是`Promise`对象的状态变为`resolved`时调用的回调函数（即promise执行函数成功执行以后会调用的函数），这里省略了第二个参数
timeout(100).then((value) => {
  console.log(value);
});

timeout(100)：调用timeout方法时传入ms为100，然后timeout方法返回一个Promise实例，表示ms(即100)毫秒之后调用resolve函数并将参数"done"传给resolve函数。
过了100毫秒（ms参数）以后，**Promise实例的状态变为resolved，接着触发then方法绑定的回调函数,打印value。
【then()的第一个参数是Promise对象的状态变为resolved时调用的回调函数**（即promise执行函数成功执行以后会调用的函数），这里省略了第二个参数】
补充：setTimeout的参数3及后续参数是传给执行函数（参数1）的其他参数，所以’done’会传给resolve()

例子:异步加载图片

复习：DOM事件onload会等到图片加载完成后立即执行（参考笔记）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();
    
    //onload:图片加载完成后立即执行
    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

上面代码中，使用Promise包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，否则就调用reject方法。

例子:resolve()参数是Promise对象

resolve()的参数是另一个Promise对象的情况：

1
2
3
4
5
6
7
8
const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})
  • 上面代码中，p1和p2都是 Promise 的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。
  • 注意，这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。 如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。

Promise.prototype.then()与 链式操作

  • 每个Promise实例都拥有then()，then()根据调用它的promise对象的状态决定使用哪个参数（回调函数）。
  • then()为 Promise 实例 添加状态改变时的 回调函数。
  • then方法的 第一个参数 是 resolved状态的回调函数 ，第二个参数（可选）是 rejected状态的回调函数。
  • then()中的参数（回调函数）获取到的参数是由调用它的Promise对象在决议为成功/失败的同时返回的数据。
  • then方法的参数（回调函数）将在当前脚本所有同步任务执行完才会执行
  • then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
    • 注意： then确实会返回一个promise，但是如果不手动return Promise，那么默认返回的promise状态就是resolved，值看你return的是啥了，不写return的话，值是undefined。return非promise则值就是这个非promise。而手动return Promise，那返回的promise状态就不一定是resolved了，因此就可以改变下一个then/catch调用的结果了。
  • 采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
    1
    2
    3
    4
    5
    6
    7
    getJSON("/post/1.json").then(function(post) {
      return getJSON(post.commentURL);
    }).then(function (comments) {
      console.log("resolved: ", comments);
    }, function (err){
      console.log("rejected: ", err);
    });
  • 上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用第一个回调函数，如果状态变为rejected，就调用第二个回调函数。

resolve()/reject()传参

then()中的参数（回调函数）获取到的参数是由调用它的Promise对象在决议为成功/失败的同时返回的数据。

通过resolve()传递的参数可在then()第一个参数（回调函数）中通过data获取，通过reject()传递的参数可在then()第二个参数（回调函数）中通过e获取：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function f(val) {
  return new Promise((resolve, reject) => {
    if (val) {
      resolve({ name: '小明' });
    } else {
      reject('404');
    }
  })
}
// then(resolve，reject)
// then方法中的第二个回调 失败时候做的事
f(true)
  .then((data) => {
    console.log(data)
  }, e => {
    console.log(e);
  })

/* 修改传参看效果
true 则打印 {name: '小明'}
false 则打印 404
*/

注意：回调函数只能传一个参数，传两个参数时是获取不到第二个参数的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function f(val) {
  return new Promise((resolve, reject) => {
    if (val) {
      // 只能传递一个参数，传两个则undefined
      resolve({ name: '小明' }, 100);
    } else {
      reject('404');
    }
  })
}
// then(resolve，reject)
// then方法中的第二个回调 失败时候做的事
f(true)
  .then((data, data2) => {
    console.log(data, data2)
  }, e => {
    console.log(e);
  })

/* data2并没传递到then的参数1中，得到的是undefined
{name: '小明'} undefined
*/

Promise.prototype.catch()处理失败

  • catch() 方法同样返回一个Promise实例，并且处理拒绝的情况。它的行为与调用Promise.prototype.then() 第二个参数（回调函数） 相同。
  • 由于catch()中处理错误以后返回的还是Promise实例，所以还可以继续调用then()。
  • 一般来说，不要在then方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。
  • promise是异步的，then()也是异步的，对异步来说try...catch是没有用的。

结合上一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function f(val) {
  return new Promise((resolve, reject) => {
    if (val) {
      resolve({ name: '小明' });
    } else {
      reject('404');
    }
  })
}

// then(resolve，reject)
f(true)
  .then((data) => {
    console.log(data) // {name: '小明'}
    return f(false); // 返回的Promise实例是失败状态，不会触发后续then的参数1
  })
  .then(() => {
    console.log('我永远不会被输出') // 不执行
  })
  .catch(e => {
    console.log(e); // 404
  })

在第二个then()中并没有对错误的处理，所以会继续往下执行，直到遇到catch()。
如果catch()前面有then()对错误进行处理，则catch()不执行：

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
27
function f(val) {
  return new Promise((resolve, reject) => {
    if (val) {
      resolve({ name: '小明' });
    } else {
      reject('404');
    }
  })
}

// then(resolve, reject)
f(true)
  .then((data) => {
    console.log(data) // {name: '小明'}
    return f(false);
  })
  .then(() => {
    console.log('我永远不会被输出') // 不执行
  })
  // 在这里被then的参数2reject拦截下进行错误处理
  .then(() => {
    // resolve
  }, e => console.log('失败')) // 失败
  // 上面then的参数2已经处理过了，catch不执行
  .catch(e => {
    console.log(e); // 不执行
  })

例子：

1
2
3
4
5
6
7
8
9
10
11
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error)) // Error: fail
  • 上面代码中，p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后改变，resolve方法返回的是p1。由于p2返回的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以，后面的then语句都变成针对后者（p1）。又过了 2 秒，p1变为rejected，导致触发catch方法指定的回调函数。
  • 注意，调用resolve或reject并不会终结 Promise 的参数函数的执行。

Promise.prototype.finally()一定执行

不论Promise对象的异步操作结果成功还是失败，finally中的内容一定会执行。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function f(val) {
  return new Promise((resolve, reject) => {
    if (val) {
      resolve({ name: '小明' });
    } else {
      reject('404');
    }
  })
}

f(true)
  .then((data) => {
    console.log(data) // {name: '小明'}
    // 返回的Promise实例是失败状态的，触发下方catch
    return f(false); 
  })
  .catch(e => {
    console.log(e); // 404
  })
  .finally(() => {
    console.log(100); // 100
  })

比较传统的 回调函数 与 promise

  • 使用 回调函数 和 promise 分别实现同样的功能，进行对比。
  • 使用回调函数写出来的函数像一个“箭头”，层层嵌套，后期修改十分麻烦。
  • 使用promise方法来写是链式写法，后期修改管理都很方便，直接复制粘贴即可。

复习逻辑与&&

&&：前后都为真才是真，只要有一个是假的就是假。所以只要有第一个表达式是假的我们就不用继续判断了，返回第一个表达式。如果第一个表达式是真的我们就继续判断第二个表达式，（但由于一定要返回一个表达式，所以）此时无论真假都得返回第二个表达式。

明确：&&和||返回的是表达式，!返回的是布尔值！

会被转换为 false 的表达式有：
null； NaN； 0； 空字符串（”” or ‘’ or ``）； undefined。

所以在下面“回调方法用于请求数据（模拟）”的例子中，** cb && cb()表示“如果存在cb就调用cb()”**

回调方法用于请求数据（模拟）

  • 回调函数：将函数b作为参数传到函数a里，当函数a执行完之后，再执行传进去的函数b，这个过程就叫做回调，回调的就是作为参数的函数b。

使用回调函数用于请求数据的例子：

  • 注意：调用回调函数时是不需要()的，直接使用函数名！
  • 实现功能：分别间隔一秒打印1,2,3,4
  • 可以看到回调函数的形式来写是一层层嵌套的金字塔形，不方便后期的修改：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//回调函数就是放在参数里调用的函数，cb就是回调函数
//写一个函数f()用于请求数据
function f(cb) {
    setTimeout(function () {
        cb && cb();//如果存在cb就调用cb(),注意cb必须是函数
    }, 1000);
}
//调用f(),其中cb为匿名函数，间隔一秒打印1,2,3,4
f(function () {
    console.log(1);
    //在匿名函数中再嵌套一个f()
    f(function () {
        console.log(2);
        //再嵌套一个f()
        f(function () {
            console.log(3);
            //再嵌套一个f()
            f(function () {
                console.log(4);

            })
        })
    })
})

promise方法用于请求数据（模拟）

  • 实现同样的功能，使用promise方法来写则是链式写法（有关then()和链式操作可参考上面的相关笔记）
  • 后期修改只需要复制粘贴，十分方便。
  • 在例子中，f()返回一个Promise实例，规定了Promise执行成功时执行的函数（1秒后执行resolve()），**then()中使用的是第一个参数（回调函数），相当于Promise（）中的resolve函数**。
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
function f() {
    return new Promise(resolve => {
        setTimeout(function () {
            resolve();
        }, 1000);
    })
}

f()
    .then(function () {
        console.log(1);
        return f();
    })
    .then(function () {
        console.log(2);
        return f();
    })
    .then(function () {
        console.log(3);
        return f();
    })
    .then(function () {
        console.log(4);
        return f();
    })

实例对比回调与Promise的流程控制

实现效果：点击 按钮 后 绿色方块“哦” 分别间隔一秒进行几次平移后回到原始位置。

index.html:
index.html

回调函数实现平移动画

(模板字符串相关知识可参考笔记ES6扩展 字符串扩展)

main.js:
main.js

使用Promise实现平移动画

main.js:
main.js
（.then()中也可以不用return然后继续.then()并在其中调用moveTo()）

ES6学习