ajax的Deferred应用场景

最新推荐文章于 2021-08-05 13:56:17 发布

想看天空的深海鱼

最新推荐文章于 2021-08-05 13:56:17 发布

阅读量346

点赞数

分类专栏：前端文章标签： ajax

本文链接：https://blog.csdn.net/qq_45044391/article/details/107376368

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开头

ajax的Deferred主要用于异步请求获取数据后，再去执行对应业务逻辑，形成一条链式代码结构。个人理解Deferred就是异步获取数据后的一种处理方式。

对比

$.ajax({
		type: "POST",
	    url: baseURL + url,
		contentType: "application/json",
	    data: JSON.stringify(vm.user),
	    success: function(r){
	    	alert("成功")；
	    	//进行外部方法调用
		}
	});

异步
如果我们将ajax请求封装起来。然后根据传入的值，请求不同的数据，进行不同的处理呢，在success方法中写上大量的’if‘判断？显然这样的写法就会有局限性，这时候需要Deferred。
同步
ajax的同步获取数据的方式会帮助开发者省去很多麻烦，但同样也会带来一些问题。最明显的就是ajax请求与页面渲染相阻塞，也就是说如果ajax请求时间过长，那麽页面将会卡死，这个时候建议使用Deferred。

Deferred的简单应用

将ajax封装成了sendAjax()方法
后台接口默认休眠5秒后返回“hello world”

function sendAjax(_url,_data){
		//给url设置默认值
   		if(_url == null) _url="127.0.0.1:8080/helloworld";
   		var defer = $.Deferred();
   		$.ajax({
   		    url : _url,
   		    data:_data,      
   		    //async : false,//原来设置的同步要注释掉
   		    success: function(backData){
   		    	var result = null;
   		    	console.log("ajax:::::"+backData);
   		    	console.log(backData);
   		    	if(backData.code == "200"){
   		    		//“hello world”
   		    		result = backData.data;
   		    	}else{
   		    		result = "";
   		    	}
   		    	//result为方法需要返回的数据
   		        defer.resolve(result);
   		    }
   		});   
   		return defer.promise();
   	}

以下为简单的demo

<body>
	<div onclick="start()">aaaaaa</div>
</body>

<script type="text/javascript">
	//点击触发start方法
	function start(){
		//调用second（）
		var data = second();
		console.log("data"+data) //菜  获取ajax返回值失败
	}
	//请求ajax 并尝试将就获取数据返回start
	function second(){
		var end = "菜";
		var result = sendAjax(null,null);
//    	$.ajaxSettings.async = false;
		//该方法将在ajax请求完成后执行
    	result.then(function(data){// data就是返回的值“hello world”
    		end = data;
    		console.log("getData:::::"+data);
    	});
    	/* $.when(sendAjax()).done(function(data){
    		end = data;
    	}); */
//    	$.ajaxSettings.async = true;
		return end
    }
    </script>