關於jQuery的Promise的使用方法,大家了解多少?本文就主要和大家分享jQuery的Promise如何正確使用,希望能幫助大家。
先前了解了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) }); der.resolve('在外部结束'); </script>這樣的話就直接在外部直接給Deferred設置了狀態,打印“在外部結束”,1s後打印“執行完成”,不會打印“非同步請求成功之後返回的數據”了。 顯然,這不好。我發個非同步請求,還沒收到資料就讓人在外部給我結束了。 。 。 。 。 。 。 當然這個坑jQuery一定會填的,在Deferred物件上有一個promise方法,是一個受限的Deferred物件
<script> function runAsync(){ var def = $.Deferred(); //做一些异步操作 setTimeout(function(){ console.log('执行完成'); def.resolve('请求成功之后返回的数据'); }, 2000); return def.promise(); //就在这里调用 } </script>所謂受限的Deferred對象,就是沒有resolve和reject方法的Deferred對象。這樣就無法在外邊改變Deferred物件的狀態了。
Deferred物件的then方法和done、fail語法糖
我們知道,在ES6的Promise規範中,then方法接受兩個參數,分別是執行完成和執行失敗的回調,而jquery中進行了增強,還可以接受第三個參數,就是在pending狀態時的回調,如下: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>Deferred物件的then方法也是可以進行鍊式運算的。 done,fail語法糖,分別用來指定執行完成和執行失敗的回呼,與這段程式碼是等價的:
<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>
always的用法
jquery的Deferred物件上還有一個always方法,不論執行完成還是執行失敗,always都會執行,有點類似ajax中的complete。$.when的用法
jquery中,還有一個$.when方法來實作Promise,與ES6中的all方法功能一樣,並行執行非同步操作,在所有的非同步操作執行完後才執行回呼函數。不過$.when並沒有定義在$.Deferred中,看名字就知道,$.when,它是一個單獨的方法。與ES6的all的參數稍有區別,它接受的並不是數組,而是多個Deferred對象,如下:<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>jquery中沒有像ES6中的race方法嗎?就是以跑的快的為準的那個方法。對的,jquery中沒有。 以上就是jquery中Deferred物件的常用方法了。 在上一篇和本篇當中,都是用一次性定時器來取代了非同步請求進行資料處理。為什麼沒用ajax呢,不是因為麻煩,在這裡要說一下ajax和Deferred的聯繫:jquery的ajax返回一個受限的Deferred對象,也就是沒有resolve方法和reject方法,不能從外部改變狀態,既然是Deferred對象,那麼我們上面講到的所有特性,ajax也都是可以用的。例如鍊式調用,連續發送多個請求:
<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與complete
這三個方法是我們常用的ajax語法糖。$.ajax(/*...*/) .success(function(){/*...*/}) .error(function(){/*...*/}) .complete(function(){/*...*/})有時候比較喜歡在內部作為屬性來處理。 分別表示ajax請求成功、失敗、結束的回呼。這三個方法與Deferred又是什麼關係呢?其實就是語法糖,success對應done,error對應fail,complete對應always,就這樣,只是為了與ajax的參數名字上保持一致而已。
總結:
$.Deferred實作了Promise規範,then、done、fail、always是Deferred物件的方法。 $.when是一個全域的方法,用來並行執行多個非同步任務,與ES6的all是一個功能。 ajax回傳一個受限的Deferred對象,success、error、complete是ajax提供的語法糖,功能與Deferred對象的done、fail、always一致。
相關建議:
以上是jQuery的Promise如何正確使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Atom編輯器mac版下載
最受歡迎的的開源編輯器

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。