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简介