ES6 Promise 先拉出来遛遛
复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？ 别猜了，直接打印出来看看吧，console.dir(Promise)，就这么简单粗暴。-
var p =
new
Promise(
function(resolve, reject){
-
//做一些异步操作
-
setTimeout(
function(){
-
console.log(
’执行完成’);
-
resolve(
’随便什么数据’);
-
},
2000);
-
});
-
function runAsync(){
-
var p =
new
Promise(
function(resolve, reject){
-
//做一些异步操作
-
setTimeout(
function(){
-
console.log(
'执行完成');
-
resolve(
'随便什么数据');
-
},
2000);
-
});
-
return p;
-
}
-
runAsync()
-
runAsync()
.then(
function(data){
-
console
.log(data);
-
//后面可以用传过来的数据做些其他操作
-
//......
-
});
-
function runAsync(callback){
-
setTimeout(
function(){
-
console.log(
'执行完成');
-
callback(
'随便什么数据');
-
},
2000);
-
}
-
-
runAsync(
function(data){
-
console.log(data);
-
});
链式操作的用法
所以，从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：-
runAsync1()
-
.then(
function(data){
-
console.log(data);
-
return runAsync2();
-
})
-
.then(
function(data){
-
console.log(data);
-
return runAsync3();
-
})
-
.then(
function(data){
-
console.log(data);
-
});
-
function runAsync1(){
-
var p =
new
Promise(
function(resolve, reject){
-
//做一些异步操作
-
setTimeout(
function(){
-
console.log(
'异步任务1执行完成');
-
resolve(
'随便什么数据1');
-
},
1000);
-
});
-
return p;
-
}
-
function runAsync2(){
-
var p =
new
Promise(
function(resolve, reject){
-
//做一些异步操作
-
setTimeout(
function(){
-
console.log(
'异步任务2执行完成');
-
resolve(
'随便什么数据2');
-
},
2000);
-
});
-
return p;
-
}
-
function runAsync3(){
-
var p =
new
Promise(
function(resolve, reject){
-
//做一些异步操作
-
setTimeout(
function(){
-
console.log(
'异步任务3执行完成');
-
resolve(
'随便什么数据3');
-
},
2000);
-
});
-
return p;
-
}
在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了，比如我们把上面的代码修改成这样：
-
runAsync1()
-
.then(
function(data){
-
console.log(data);
-
return runAsync2();
-
})
-
.then(
function(data){
-
console.log(data);
-
return
'直接返回数据';
//这里直接返回数据
-
})
-
.then(
function(data){
-
console.log(data);
-
});
reject的用法
到这里，你应该对“Promise是什么玩意”有了最基本的了解。那么我们接着来看看ES6的Promise还有哪些功能。我们光用了resolve，还没用reject呢，它是做什么的呢？事实上，我们前面的例子都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。看下面的代码。-
function getNumber(){
-
var p =
new
Promise(
function(resolve, reject){
-
//做一些异步操作
-
setTimeout(
function(){
-
var num =
Math.ceil(
Math.random()*
10);
//生成1-10的随机数
-
if(num<=
5){
-
resolve(num);
-
}
-
else{
-
reject(
'数字太大了');
-
}
-
},
2000);
-
});
-
return p;
-
}
-
-
getNumber()
-
.then(
-
function(data){
-
console.log(
'resolved');
-
console.log(data);
-
},
-
function(reason, data){
-
console.log(
'rejected');
-
console.log(reason);
-
}
-
);
catch的用法
我们知道Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调，用法是这样：-
getNumber()
-
.then(
function(data){
-
console
.log(
'resolved');
-
console
.log(data);
-
})
-
.catch(
function(reason){
-
console
.log(
'rejected');
-
console
.log(reason);
-
});
-
getNumber()
-
.then(
function(data){
-
console
.log(
'resolved');
-
console
.log(data);
-
console
.log(somedata);
//此处的somedata未定义
-
})
-
.catch(
function(reason){
-
console
.log(
'rejected');
-
console
.log(reason);
-
});
all的用法
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数，看下面的例子：-
Promise
-
.all([runAsync1(), runAsync2(), runAsync3()])
-
.then(
function(results){
-
console.log(results);
-
});
race的用法
all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync1的延时改为1秒来看一下：-
Promise
-
.race([runAsync1(), runAsync2(), runAsync3()])
-
.then(
function(results){
-
console.log(results);
-
});
-
//请求某个图片资源
-
function requestImg(){
-
var p =
new
Promise(
function(resolve, reject){
-
var img =
new Image();
-
img.onload =
function(){
-
resolve(img);
-
}
-
img.src =
'xxxxxx';
-
});
-
return p;
-
}
-
-
//延时函数，用于给请求计时
-
function timeout(){
-
var p =
new
Promise(
function(resolve, reject){
-
setTimeout(
function(){
-
reject(
'图片请求超时');
-
},
5000);
-
});
-
return p;
-
}
-
-
Promise
-
.race([requestImg(), timeout()])
-
.then(
function(results){
-
console.log(results);
-
})
-
.catch(
function(reason){
-
console.log(reason);
-
});
总结
ES6 Promise的内容就这些吗？是的，能用到的基本就这些。 我怎么还见过done、finally、success、fail等，这些是啥？这些并不在Promise标准中，而是我们自己实现的语法糖。 本文中所有异步操作均以setTimeout为例子，之所以不使用ajax是为了避免引起混淆，因为谈起ajax，很多人的第一反应就是jquery的ajax，而jquery又有自己的Promise实现。如果你理解了原理，就知道使用setTimeout和使用ajax是一样的意思。说起jquery，我不得不吐槽一句，jquery的Promise实现太过垃圾，各种语法糖把人都搞蒙了，我认为Promise之所以没有全面普及和jquery有很大的关系。转载自https://blog.csdn.net/MrJavaweb/article/details/79475949
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
