The specific use of Promise in jQuery
This article mainly introduces the specific usage of jQuery's Promise. I have previously learned about the Promise object of ES6. Let's take a look at the Promise in jQuery, which is the Deferred object of jQuery. The editor thinks it’s pretty good, so I’d like to share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Open the browser console first.
<script> var defer = $.Deferred(); console.log(defer); </script>
Running results:
looks a bit like the Promise object of ES6, and jQuery’s Deferred object also has resolve , reject, then methods, as well as done, fail, always... methods. jQuery uses this Deferred object to register callback functions for asynchronous operations, modify and transfer the status of asynchronous operations.
Play with Deferred:
<script>
function runAsync(){
var defer = $.Deferred();
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
defer.resolve('异步请求成功之后返回的数据');
}, 1000);
return defer;
}
runAsync().then(function(data){
console.log(data)
});
</script>After running, the instance defer of the Deferred object returns the parameter "data returned after the asynchronous request is successful" through the resolve method. Go to the then method to receive and print.
is similar to ES6 Promise, but there is a little difference. Let’s look at Promise again:
##
<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><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)
});
der.resolve('在外部结束');
</script><script>
function runAsync(){
var def = $.Deferred();
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
def.resolve('请求成功之后返回的数据');
}, 2000);
return def.promise(); //就在这里调用
}
</script>The then method of Deferred object and done and fail syntactic sugar
We know that in the ES6 Promise specification, the then method accepts two parameters, namely execution completion and callback for execution failure, and jquery has been enhanced and can also accept the third parameter, which is the callback in the pending state, as follows:deferred.then( doneFilter [, failFilter ] [ , progressFilter ] )
<script>
function runAsync(){
var def = $.Deferred();
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
def.resolve(num);
}
else{
def.reject('数字太大了');
}
}, 2000);
return def.promise(); //就在这里调用
}
runAsync().then(function(d){
console.log("resolve");
console.log(d);
},function(d){
console.log("reject");
console.log(d);
})
</script>##
<script>
function runAsync(){
var def = $.Deferred();
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
def.resolve(num);
}
else{
def.reject('数字太大了');
}
}, 2000);
return def.promise(); //就在这里调用
}
runAsync().done(function(d){
console.log("resolve");
console.log(d);
}).fail(function(d){
console.log("reject");
console.log(d);
})
</script>Usage of always
There is also an always method on the Deferred object of jquery. Regardless of whether the execution is completed or failed, always will be executed, which is somewhat similar to complete in ajax.
#Usage of $.whenIn jquery, there is also a $.when method to implement Promise. It has the same function as the all method in ES6 and performs asynchronous operations in parallel. , the callback function is executed only after all asynchronous operations have been executed. However, $.when is not defined in $.Deferred. You can tell by looking at the name, $.when, it is a separate method. It is slightly different from the all parameter of ES6. It does not accept an array, but multiple Deferred objects, as follows:
<script>
function runAsync(){
var def = $.Deferred();
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
def.resolve(num);
}, 2000);
return def.promise(); //就在这里调用
}
$.when(runAsync(), runAsync(), runAsync()) .then(function(data1, data2, data3){
console.log('全部执行完成');
console.log(data1, data2, data3);
});
</script>There is no race in jquery like in ES6 Method? It's the method based on the fastest one. Right, it doesn't exist in jquery.
The above are the common methods of Deferred objects in jquery.
In the previous article and this article, one-time timers were used instead of asynchronous requests for data processing. Why don't you use ajax? It's not because of trouble. Here I want to talk about the connection between ajax and Deferred:
jquery's ajax returns a restricted Deferred object, that is, there is no resolve method and reject method, and it cannot be used from the outside. To change the state, since it is a Deferred object, all the features we mentioned above can also be used with ajax. For example, chain calls, sending multiple requests continuously:
<script>
req1 = function(){
return $.ajax(/* **** */);
}
req2 = function(){
return $.ajax(/* **** */);
}
req3 = function(){
return $.ajax(/* **** */);
}
req1().then(req2).then(req3).done(function(){ console.log('请求发送完毕'); });
</script>success, error and complete
These three methods are our Commonly used ajax syntactic sugar.
$.ajax(/*...*/)
.success(function(){/*...*/})
.error(function(){/*...*/})
.complete(function(){/*...*/})Sometimes it is preferable to handle it internally as an attribute.
Represents the callbacks of success, failure, and end of the ajax request respectively. What is the relationship between these three methods and Deferred? In fact, it is syntactic sugar. Success corresponds to done, error corresponds to fail, and complete corresponds to always. That's it, just to keep the parameter names consistent with ajax.
Summary:
$.Deferred implements the Promise specification, then, done, fail, and always are the methods of the Deferred object. $.when is a global method used to run multiple asynchronous tasks in parallel, which is the same function as ES6's all. ajax returns a restricted Deferred object. Success, error, and complete are syntactic sugars provided by ajax. Their functions are consistent with done, fail, and always of the Deferred object.
Related recommendations:
About the simple usage of promise objects
The implementation of asynchronous process processing by Promise in WeChat applet Process
Promise completes the processing instance of multiple interdependent asynchronous requests
The above is the detailed content of The specific use of Promise in jQuery. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use DirectX repair tool? Detailed usage of DirectX repair tool
Mar 15, 2024 am 08:31 AM
The DirectX repair tool is a professional system tool. Its main function is to detect the DirectX status of the current system. If an abnormality is found, it can be repaired directly. There may be many users who don’t know how to use the DirectX repair tool. Let’s take a look at the detailed tutorial below. 1. Use repair tool software to perform repair detection. 2. If it prompts that there is an abnormal problem in the C++ component after the repair is completed, please click the Cancel button, and then click the Tools menu bar. 3. Click the Options button, select the extension, and click the Start Extension button. 4. After the expansion is completed, re-detect and repair it. 5. If the problem is still not solved after the repair tool operation is completed, you can try to uninstall and reinstall the program that reported the error.
How to use Baidu Netdisk-How to use Baidu Netdisk
Mar 04, 2024 pm 09:28 PM
Many friends still don’t know how to use Baidu Netdisk, so the editor will explain how to use Baidu Netdisk below. If you are in need, hurry up and take a look. I believe it will be helpful to everyone. Step 1: Log in directly after installing Baidu Netdisk (as shown in the picture); Step 2: Then select "My Sharing" and "Transfer List" according to the page prompts (as shown in the picture); Step 3: In "Friend Sharing", you can share pictures and files directly with friends (as shown in the picture); Step 4: Then select "Share" and then select computer files or network disk files (as shown in the picture); Fifth Step 1: Then you can find friends (as shown in the picture); Step 6: You can also find the functions you need in the "Function Treasure Box" (as shown in the picture). The above is the editor’s opinion
What is the KMS activation tool? How to use the KMS activation tool? How to use KMS activation tool?
Mar 18, 2024 am 11:07 AM
The KMS Activation Tool is a software tool used to activate Microsoft Windows and Office products. KMS is the abbreviation of KeyManagementService, which is key management service. The KMS activation tool simulates the functions of the KMS server so that the computer can connect to the virtual KMS server to activate Windows and Office products. The KMS activation tool is small in size and powerful in function. It can be permanently activated with one click. It can activate any version of the window system and any version of Office software without being connected to the Internet. It is currently the most successful and frequently updated Windows activation tool. Today I will introduce it Let me introduce to you the kms activation work
How to use potplayer-How to use potplayer
Mar 04, 2024 pm 06:10 PM
Potplayer is a very powerful media player, but many friends still don’t know how to use potplayer. Today I will introduce how to use potplayer in detail, hoping to help everyone. 1. PotPlayer shortcut keys. The default common shortcut keys for PotPlayer player are as follows: (1) Play/pause: space (2) Volume: mouse wheel, up and down arrow keys (3) forward/backward: left and right arrow keys (4) bookmark: P- Add bookmarks, H-view bookmarks (5) full screen/restore: Enter (6) multiple speeds: C-accelerate, 7) Previous/next frame: D/
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
How to use Xiaoma win7 activation tool - How to use Xiaoma win7 activation tool
Mar 04, 2024 pm 06:16 PM
I believe that many users are using the Xiaoma win7 activation tool, but do you know how to use the Xiaoma win7 activation tool? Then, the editor will bring you how to use the Xiaoma win7 activation tool. For those who are interested in this, please come to the following article Let's see. The first step is to go to "My Computer" after reinstalling the system, click "System Properties" in the upper menu, and check the Windows activation status. In the second step, click to download the win7 activation tool online and click to open it (there are many resources available everywhere). The third step is to open the Xiaoma activation tool and click "Activate Windows permanently". The fourth step is to wait for the activation process to complete activation. Step 5: Check the Windows activation status again and find that the system has been activated.
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
