Promise的基本用法

Promise的基本用法

在使用JavaScript时，为了实现某些逻辑经常会写出层层嵌套的回调函数，如果嵌套过多，会极大影响代码可读性和逻辑，这种情况也被成为回调地狱。

Promise:ES6新增的内置类，是为了管理异步操作的。

Promise一个明显的好处便是可以用来解决回调地狱。特别是在处理多个回调相互依赖的情况。

使用Promise解决多个异步依赖调用

Promise提供了一个方法Promise.all([p1,p2,p3]) ，用于将多个Promise实例，包装成一个新的Promise实例。接收的参数是一个数组,p1、p2、p3都是Promise对象。此时Promise.all的状态取决于它的参数。

分两种情况：

1.p1、p2、p3的状态都是resolve的时候，Promise.all的状态才会变成resolve；
2.只要p1、p2、p3中有一个的状态为reject，那么Promise.all的状态就会变成reject；

所以我们可以用Promise.all()来解决多个异步依赖调用。

语法：

var p = new Promise(function (suc, fail) {
        setTimeout(() => {
            suc();
        }, Math.random()* 1000);
        setTimeout(() => {
            fail();
        }, Math.random()* 1000);
    });
    p.then(function (suc) {
        console.log("成功");
    }, function (fail) {
        console.log("失败");
    });

promise改造ajax-get依赖调用，解决回调地域的问题：

<script type="text/javascript">	
		document.onclick = function(){
			var p1 = ajaxGet("http://localhost/shang/promise/data/data1.php");
			var p2 = ajaxGet("http://localhost/shang/promise/data/data2.php");
			var p3 = ajaxGet("http://localhost/shang/promise/data/data3.php");
			
			Promise.all([p1,p2,p3]).then(function(res){
				console.log(res);
			},function(res){
				console.log(res);
			})
		}

		function ajaxGet(url,data){
			data = data || {};
			var str = "";
			for(var i in data){
				str = str + i+"="+data[i]+"&";
			}
			var d = new Date();
			url = url + "?" + str + "__qft="+d.getTime();
			var p = new Promise((success,error)=>{
				var xhr = new XMLHttpRequest();
				xhr.open("get",url,true);
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						success(xhr.responseText);
					}else if(xhr.readyState == 4 && xhr.status != 200){
						error(xhr.status)
					}
				}
				xhr.send();
			});
			return p;
		}
	</script>

promise改造ajax-post依赖调用，解决回调地域的问题：

<script>
    document.onclick = function () {
        var p1 = ajaxPost("http://localhost/shang/promise/data/data1.php");
        var p2 = ajaxPost("http://localhost/shang/promise/data/data2.php");
        var p3 = ajaxPost("http://localhost/shang/promise/data/data3.php");

        Promise.all([p1, p2, p3]).then(function (res) {
            console.log(res);
        }, function (res) {
            console.log(res);
        })
    }

    function ajaxPost(url, data) {
        var str = "";
        for (var i in data) {
            str += `${i}=${data[i]}&`;
        }
        str = str.slice(0, str.length - 1)
        var p = new Promise((success, error) => {
            var ajax = new XMLHttpRequest();
            ajax.open("post", url, true);
            ajax.onreadystatechange = function () {
                if (ajax.readyState === 4 && ajax.status === 200) {
                    success(ajax.responseText);
                } else if (ajax.readyState == 4 && ajax.status != 200) {
                    error(ajax.status)
                }
            }
            ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            ajax.send(str);
        });
        return p;
    }
</script>

promise改造ajax-jsonp依赖调用，解决回调地域的问题：