［ES6］Promise对象Promise.all()方法的使用

Promise对象是ECMAScript 6中新增的对象。Promise对象把JavaScript中的异步处理对象和处理规则进行了规范化。本文以两个示例介绍一下Promise对象中Promise.all()方法的使用。

1. Promise.all()方法简介

Promise.all(promiseArray)方法是Promise对象上的静态方法，该方法的作用是将多个Promise对象实例包装，生成并返回一个新的Promise实例。

参数：promiseArray，是一个Promise实例数组

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

在上面的方法中，promise数组中所有的promise实例都变为resolve的时候，该方法才会返回，并将所有结果传递results数组中。promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象。reject使用示例如下：

var p1 = Promise.resolve(1),
    p2 = Promise.reject(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    //then方法不会被执行
    console.log(results); 
}).catch(function (e){
    //catch方法将会被执行，输出结果为：2
    console.log(2);
});

2. 两则示例

2.1 在Node.js中使用

Promise对象已经在Node.js V4.0以上版本原生支持，以下示例基于Node.js V4.0运行环境。

var http = require('http');

function getURL(URL) {
    return new Promise(function(resolve, reject){
	http.get(URL, function(res) {
	    resolve(res);
	}).on('error', function(e) {
	    reject(e);
	});
    });
}
var itbilu = getURL('http://itbilu.com');
var yijiebuyi = getURL('http://yijiebuyi.com');

Promise.all([itbilu, yijiebuyi]).then(function(results){
    results.forEach(function(result){
	console.log(result.statusCode);
    });
}).catch(function(err){
    console.log(err);
});
/* 输出如下
200
200
*/

2.2 在浏览器环境中使用

在浏览中，使用XMLHttpRequest进行Ajax请求，需要被访问网站支持跨域请求，即，需要返回的HTTP Header中包括Access-Control-Allow-Origin信息。

function getURL(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', URL, true);
        req.responseType = "json";
        req.setRequestHeader("Accept", "application/json");
        req.onload = function () {
            if (req.status === 200) {
                resolve(req);
            } else {
                reject(new Error(req.statusText));
            }
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}
var github = getURL('https://api.github.com');
var nodejs = getURL('https://nodejs.org/api/index.json');

Promise.all([github, nodejs]).then(function(results){
    results.forEach(function(result){
        console.log(result.status);
    });
}).catch(function(err){
    console.log(err);
});
/* 输出如下
200
200
*/

另外，还有很多浏览器并不支持 ES6 的Promise对象，浏览器兼容方案请参考：ECMAScript 6 Promise对象学习之Promise兼容方案。更多Promise对象介绍：ECMAScript 6 Promise对象学习之Promise简介