【ES6】 — ECMAScript6快速入门03

异步：Promise — 承诺

就是一个对象，用来传递异步操作数据（消息）

使用Promise

var p1 = new Promise(function(resolve, reject){
//reject 失败了
    reject(2);
//resolve 成功了
    resolve(1);                         //reject先执行，所以不执行此回调
    console.info(32839298);             //会执行
});
p1.then(function(value){
    console.info("成功了",value);
},function(value){
    console.info("失败了",value);
});

Promise通过then传输数据

var p1 = new Promise(function(resolve, reject){
resolve(1);
});
p1.then(function(value){
    console.info("成功了",value);      //value为resolve传递过来的数据
return "给下一个then的数据";
},function(value){
    console.info("失败了",value);
}).then(function(value){
    console.info(value);        //给下一个then的数据
});

Promise应用案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function ajax(url,fuSucc,fnFail) {
var oAjax = new XMLHttpRequest();
 oAjax.open('GET',url,true);
 oAjax.send();
 oAjax.onload = function() {
if(oAjax.readyState==4 && oAjax.status == 200) {
 fuSucc(oAjax.responseText);
 } else {
 fnFail(oAjax.status);
 }
 }
 }
 window.onload = function(){
let oBtn = document.getElementById("btn1");
let oBox = document.getElementById("box1");
 oBtn.onclick = function(){
let p1 = new Promise(function(resolve,reject){
 ajax('a.txt',function(data){
 resolve(data);
 },function(data){
 reject(data);
 });
 });
 p1.then(function(str){
 oBox.innerHTML = str;
 },function(str){
 oBox.innerHTML = str;
 });
 }
 }
</script>
</head>
<body>
<input type="button" value="获取数据" id="btn1" />
<div id="box1"></div>
</body>
</html>

catch捕捉异常

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var p1 = new Promise(function(resolve,reject){
 resolve("成功了");
 });
 p1.then(function(value){
 console.info(value); //输出 -> 成功了
throw '发生错误了';
 }).catch(function(e){
 console.info(e); //输出 -> 发生错误了
 });
</script>
</head>
<body>
</body>
</html>

Promise.all：全部用于将多个promise对象，组合，包装成一个全新的promise实例

Promise.all([p1,p2,p3…])； //所有的promise对象，都正确，才能成功。

var p1 = Promise.resolve(3);
var p2 = Promise.resolve("第二个");
Promise.all([false,p1,p2]).then(function(value){        //此处false表示的是一个Promise对象执行成功返回的数据
    console.info("成功了",value);
},function(value){
    console.info("成功了",value);
});

【ES6】 — ECMAScript6快速入门03

Promise.race：返回也是一个Promise对象，作用是判断哪个promise最快执行成功，就用哪个。注意最先执行的promise是reject将会报错。

var p1 = new Promise(function(resolve,reject){
    setTimeout(resolve,1000,'one');
});
var p2 = new Promise(function(resolve,reject){
    setTimeout(resolve,100,'two');
});
Promise.race([p1,p2]).then(function(value){
    console.info(value);        //输出 -> two
});

Promise.reject：生成一个错的promise对象；

Promise.reject('这是错误的信息').then(function(){
    console.info("成功");
},function(res){
    console.info(res);      //这是错误的信息
});

Promise.resolve：生成一个成功的promise对象

Promise.resolve(value)：

Promise.resolve('success').then(function(value){
    console.info(value);        //success
},function(res){
    console.info("失败");
});

Promise.resolve(promise)：

var p1 = Promise.resolve(3);
var p2 = Promise.resolve(p1);
p2.then(function(value){
    console.info(value);            //是p1的成功数据
});

秒客网

【ES6】 — ECMAScript6快速入门03

异步：Promise — 承诺

相关文章