认识jQuery的Promise的具体使用方法

2020-05-27 18:05:22易采站长站整理

先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象。

打开浏览器的控制台先。


<script>
var defer = $.Deferred();
console.log(defer);
</script>

运行结果:

 

和ES6的Promise对象长的有点像,jQuery的Deferred对象也有resolve、reject、then方法,还有done、fail、always……方法。jQuery就是用这个Deferred对象来注册异步操作的回调函数,修改并传递异步操作的状态。

玩玩Deferred:


<script>
function runAsync(){
var defer = $.Deferred();
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
defer.resolve('异步请求成功之后返回的数据');
}, 1000);
return defer;
}
runAsync().then(function(data){
console.log(data)
});
</script>

运行之后,Deferred对象的实例defer通过resolve方法把参数 “异步请求成功之后返回的数据” 传回到then方法中进行接收,,打印。

和ES6的Promise相似,但是有一点点区别,再看下Promise:


<script>
function runAsync(){
var p = new Promise(function(resolve, reject){

setTimeout(function(){
console.log('执行完成');
resolve('异步请求成功之后返回的数据');
}, 1000);
});
return p;
}

runAsync().then(function(data){
console.log(data);
});
</script>

我们发现:

1、创建Deferred对象的时候没有传参;而创建Promise对象的时候,传了参数(传了一个匿名函数,函数也有两个参数:resolve、reject);

2、Deferred对象直接调用了resolve方法;而Promise对象则是在内部调用的resolve方法;

说明:Deferred对象本身就有resolve方法,而Promise对象是在构造器中通过执行resolve方法,给Promise对象赋上了执行结果的状态。

这样就有一个弊端:因为Deferred对象自带resolve方法,拿到Deferred对象之后,就可以随时调用resolve方法,其状态可以进行手动干预了


<script>
function runAsync(){
var defer = $.Deferred();
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
defer.resolve('异步请求成功之后返回的数据');
}, 1000);
return defer;
}
   var der = runAsync();
   der.then(function(data){
console.log(data)
   });