【jquery】适用Deferred实现jquery将请求封装成函数

最新推荐文章于 2024-10-05 16:25:01 发布

原创最新推荐文章于 2024-10-05 16:25:01 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

web应用专栏收录该内容

84 篇文章

订阅专栏

本文通过一个简单的示例，介绍了如何利用jQuery 1.5.0后的Deferred对象来封装异步GET请求函数，避免同步请求阻塞主线程。提供了相关学习资源链接，并展示了如何为函数传递参数。

有时候需要将jquery的请求api数据的代码封装成函数，供其他页面调用，此时有两种方法，一种是适用ajax发起同步请求，但是ajax的同步请求会阻塞主线程UI的刷新。在jquery 1.5.0之后引入了Deferred，关于Deferred的相关学习和说明可以参考如下一些优秀的界面：

http://blog.youkuaiyun.com/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>