ES6学习

发表于 | 分类于 |
字数统计: 568 | 阅读时长 ≈ 2

Promise

Promise 基本用法

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

1
2
3
4
5
6
7
8
const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

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

1
2
3
4
5
6
promise.then(function(value) {
  // success   第一个回调函数是Promise对象的状态变为resolved时调用，
}, function(error) {
  // failure   第二个回调函数是Promise对象的状态变为rejected时调用。

}); // 其中，第二个函数是可选的，不一定要提供

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

1
2
3
4
5
6
7
8
9
10
11
function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

//上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为resolved，就会触发then方法绑定的回调函数。

调用resolve或reject并不会终结 Promise 的参数函数的执行。

1
2
3
4
5
6
7
8
9
10
new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

//上面代码中，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

提示注意。

1
2
3
4
5
6
7
// 一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。

new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

Promise 新建后就会立即执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let promise = new Promise(function(resolve, reject) {
  console.log('Promise'); //Promise 新建后立即执行，所以首先输出的是Promise
  resolve(); 
  //resolve();  注释掉就不会打印 resolved
});

promise.then(function() {
  console.log('resolved.');//  然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。
});

console.log('Hi!');

// Promise
// Hi!
// resolved