【jquery】適用Deferred實現jquery將請求封裝成函式

yingxian_Fei發表於2017-06-23
jQuery封裝函式

有時候需要將jquery的請求api資料的程式碼封裝成函式，供其他頁面呼叫，此時有兩種方法，一種是適用ajax發起同步請求，但是ajax的同步請求會阻塞主執行緒UI的重新整理。在jquery 1.5.0之後引入了Deferred，關於Deferred的相關學習和說明可以參考如下一些優秀的介面：

http://blog.csdn.net/ljj_9/article/details/52797299

本文介紹一個簡單的使用demo，該demo封裝了三個使用jquery發起的get請求方法，每個方法接受一個傳入的引數。程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5的標題</title>
<script src="/js/jquery-1.12.2.min.js"></script>
<script>
function getLocation(imei) {
   var defer = $.Deferred();
    $.get("/devices/"+imei+"/location",function(data,status){
	   defer.resolve(data);
    });		
	return defer.promise();
}

function getMileage(imei) {
   var defer = $.Deferred();
    $.get("/devices/"+imei+"/mileage",function(data,status){
	   defer.resolve(data);
    });		
	return defer.promise();
}

function getFences(imei) {
   var defer = $.Deferred();
    $.get("/devices/"+imei+"/fences",function(data,status){
	   defer.resolve(data);
    });		
	return defer.promise();
}

$(document).ready(function(){
  $("button").click(function() {
      //get location.
	  $.when(getLocation("869449021424717")).done(function(data) {
		  alert("get location code="+data.code);
	  });
	  //get milegae.
	  $.when(getMileage("869449021424717")).done(function(data) {
		  alert("get mileage code="+data.code);
	  });	
      //get fences.
	  $.when(getFences("869449021424717")).done(function(data) {
		  alert("get fences code="+data.code);
	  });		  
  });
});
</script>
</head>
<body>
	<button>點選傳送請求</button>
</body>
</html>


相關文章