Promise 对象

转载：http://wiki.jikexueyuan.com/project/es6/promise.html

基本用法

ES6 原生提供了 Promise 对象。所谓 Promise 对象，就是代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供的接口，使得控制异步操作更加容易。Promise 对象的概念的详细解释，请参考《JavaScript标准参考教程》。

ES6 的 Promise 对象是一个构造函数，用来生成 Promise 实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
var promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
 
promise.then(function(value) {
  // success
}, function(value) {
  // failure
});

　　

上面代码中，Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 方法和 reject 方法。如果异步操作成功，则用 resolve 方法将 Promise 对象的状态，从“未完成”变为“成功”（即从 pending 变为 resolved）；如果异步操作失败，则用 reject 方法将 Promise 对象的状态，从“未完成”变为“失败”（即从 pending 变为 rejected）。

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

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

1
2
3
4
5
6
7
8
9
function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
 
timeout(100).then(() => {
  console.log('done');
});

　　

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

下面是一个用 Promise 对象实现的 Ajax 操作的例子。

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
var getJSON = function(url) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
 
    function handler() {
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });
 
  return promise;
};
 
getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

　　

上面代码中，getJSON 是对 XMLHttpRequest 对象的封装，用于发出一个针对 JSON 数据的 HTTP 请求，并且返回一个 Promise 对象。需要注意的是，在 getJSON 内部，resolve 方法和 reject 方法调用时，都带有参数。

如果调用 resolve 方法和 reject 方法时带有参数，那么它们的参数会被传递给回调函数。reject 方法的参数通常是 Error 对象的实例，表示抛出的错误；resolve 方法的参数除了正常的值以外，还可能是另一个 Promise 实例，表示异步操作的结果有可能是一个值，也有可能是另一个异步操作，比如像下面这样。

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

　　

上面代码中，p1 和 p2 都是 Promise 的实例，但是 p2 的 resolve 方法将 p1 作为参数，p1 的状态就会传递给 p2。

注意，这时 p1 的状态决定了 p2 的状态。如果 p1 的状态是 pending，那么 p2 的回调函数就会等待 p1 的状态改变；如果 p1 的状态已经是 fulfilled 或者 rejected，那么 p2 的回调函数将会立刻执行。

Promise.prototype.then()

Promise.prototype.then 方法返回的是一个新的Promise对象，因此可以采用链式写法，即then方法后面再调用另一个then方法。

1
2
3
4
5
getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

　　

上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

如果前一个回调函数返回的是Promise对象，这时后一个回调函数就会等待该Promise对象有了运行结果，才会进一步调用。

 

1
2
3
4
5
getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // ...
});

　　

then方法还可以接受第二个参数，表示Promise对象的状态变为rejected时的回调函数。

Promise.prototype.catch()

Promise.prototype.catch方法是Promise.prototype.then(null, rejection)的别名，用于指定发生错误时的回调函数。

1
2
3
4
5
6
getJSON("/posts.json").then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

　　

上面代码中，getJSON方法返回一个Promise对象，如果该对象运行正常，则会调用then方法指定的回调函数；如果该方法抛出错误，则会调用catch方法指定的回调函数，处理这个错误。

下面是一个例子。

1
2
3
4
5
var promise = new Promise(function(resolve, reject) {
  throw new Error('test')
});
promise.catch(function(error) { console.log(error) });
// Error: test

　　

上面代码中，Promise抛出一个错误，就被catch方法指定的回调函数捕获。

如果Promise状态已经变成resolved，再抛出错误是无效的。

1
2
3
4
5
6
7
8
var promise = new Promise(function(resolve, reject) {
  resolve("ok");
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

　　

上面代码中，Promise在resolve语句后面，再抛出错误，不会被捕获，等于没有抛出。

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

1
2
3
4
5
6
7
getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

　　

上面代码中，一共有三个Promise对象：一个由getJSON产生，两个由then产生。它们之中任何一个抛出的错误，都会被最后一个catch捕获。

跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。

1
2
3
4
5
6
7
8
9
10
var someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};
 
someAsyncThing().then(function() {
  console.log('everything is great');
});

　　

上面代码中，someAsyncThing函数产生的Promise对象会报错，但是由于没有调用catch方法，这个错误不会被捕获，也不会传递到外层代码，导致运行后没有任何输出。

1
2
3
4
5
6
7
var promise = new Promise(function(resolve, reject) {
  resolve("ok");
  setTimeout(function() { throw new Error('test') }, 0)
});
promise.then(function(value) { console.log(value) });
// ok
// Uncaught Error: test

　　

上面代码中，Promise指定在下一轮“事件循环”再抛出错误，结果由于没有指定catch语句，就冒泡到最外层，成了未捕获的错误。

Node.js有一个unhandledRejection事件，专门监听未捕获的reject错误。

1
2
3
process.on('unhandledRejection', function (err, p) {
  console.error(err.stack)
});

　　

上面代码中，unhandledRejection事件的监听函数有两个参数，第一个是错误对象，第二个是报错的Promise实例，它可以用来了解发生错误的环境信息。。

需要注意的是，catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};
 
someAsyncThing().then(function() {
  return someOtherAsyncThing();
}).catch(function(error) {
  console.log('oh no', error);
}).then(function() {
  console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on

　　

上面代码运行完catch方法指定的回调函数，会接着运行后面那个then方法指定的回调函数。

catch方法之中，还能再抛出错误。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};
 
someAsyncThing().then(function() {
  return someOtherAsyncThing();
}).catch(function(error) {
  console.log('oh no', error);
  // 下面一行会报错，因为y没有声明
  y + 2;
}).then(function() {
  console.log('carry on');
});
// oh no [ReferenceError: x is not defined]

　　

上面代码中，catch方法抛出一个错误，因为后面没有别的catch方法了，导致这个错误不会被捕获，也不会到传递到外层。如果改写一下，结果就不一样了。

1
2
3
4
5
6
7
8
9
10
11
someAsyncThing().then(function() {
  return someOtherAsyncThing();
}).catch(function(error) {
  console.log('oh no', error);
  // 下面一行会报错，因为y没有声明
  y + 2;
}).catch(function(error) {
  console.log('carry on', error);
});
// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]

　　

上面代码中，第二个catch方法用来捕获，前一个catch方法抛出的错误。

Promise.all()，Promise.race()

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。

1
var p = Promise.all([p1,p2,p3]);

　　

上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是Promise对象的实例。（Promise.all方法的参数不一定是数组，但是必须具有iterator接口，且返回的每个成员都是Promise实例。）

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

下面是一个具体的例子。

1
2
3
4
5
6
7
8
9
10
// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function(id){
  return getJSON("/post/" + id + ".json");
});
 
Promise.all(promises).then(function(posts) {
  // ... 
}).catch(function(reason){
  // ...
});

　　

Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。

1
var p = Promise.race([p1,p2,p3]);

　　

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的返回值。

如果Promise.all方法和Promise.race方法的参数，不是Promise实例，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。

Promise.resolve()，Promise.reject()

有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用。

1
var jsPromise = Promise.resolve($.ajax('/whatever.json'));

　　

上面代码将jQuery生成deferred对象，转为一个新的ES6的Promise对象。

如果Promise.resolve方法的参数，不是具有then方法的对象（又称thenable对象），则返回一个新的Promise对象，且它的状态为fulfilled。

1
2
3
4
5
6
var p = Promise.resolve('Hello');
 
p.then(function (s){
  console.log(s)
});
// Hello

　　

上面代码生成一个新的Promise对象的实例p，它的状态为fulfilled，所以回调函数会立即执行，Promise.resolve方法的参数就是回调函数的参数。

所以，如果希望得到一个Promise对象，比较方便的方法就是直接调用Promise.resolve方法。

1
2
3
4
5
var p = Promise.resolve();
 
p.then(function () {
  // ...
});

　　

上面代码的变量p就是一个Promise对象。

如果Promise.resolve方法的参数是一个Promise对象的实例，则会被原封不动地返回。

Promise.reject(reason)方法也会返回一个新的Promise实例，该实例的状态为rejected。Promise.reject方法的参数reason，会被传递给实例的回调函数。

1
2
3
4
5
6
var p = Promise.reject('出错了');
 
p.then(null, function (s){
  console.log(s)
});
// 出错了

　　

上面代码生成一个Promise对象的实例p，状态为rejected，回调函数会立即执行。

Generator函数与Promise的结合

使用Generator函数管理流程，遇到异步操作的时候，通常返回一个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
27
28
29
30
31
32
function getFoo () {
  return new Promise(function (resolve, reject){
    resolve('foo');
  });
}
 
var g = function* () {
  try {
    var foo = yield getFoo();
    console.log(foo);
  } catch (e) {
    console.log(e);
  }
};
 
function run (generator) {
  var it = generator();
 
  function go(result) {
    if (result.done) return result.value;
 
    return result.value.then(function (value) {
      return go(it.next(value));
    }, function (error) {
      return go(it.throw(value));
    });
  }
 
  go(it.next());
}
 
run(g);

　　

上面代码的Generator函数g之中，有一个异步操作getFoo，它返回的就是一个Promise对象。函数run用来处理这个Promise对象，并调用下一个next方法。

async函数

概述

async函数与Promise、Generator函数一样，是用来取代回调函数、解决异步操作的一种方法。它本质上是Generator函数的语法糖。async函数并不属于ES6，而是被列入了ES7，但是traceur、Babel.js、regenerator等转码器已经支持这个功能，转码后立刻就能使用。

下面是一个Generator函数，依次读取两个文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var fs = require('fs');
 
var readFile = function (fileName){
  return new Promise(function (resolve, reject){
    fs.readFile(fileName, function(error, data){
      if (error) reject(error);
      resolve(data);
    });
  });
};
 
var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

　　

上面代码中，readFile函数是fs.readFile的Promise版本。

写成async函数，就是下面这样。

1
2
3
4
5
6
var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

http://www.cnblogs.com/lvhw/p/6986806.html

延伸阅读

洋葱架构简介——分离是为了更好的结合-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训洋葱架构简介——分离是为了更好的结合