ES6的promise函数用法讲解

　　总结：Promise函数的出现极大的解决了Js中的异步调用代码逻辑编写太过复杂的问题，Promise对象让异步调用函数的流程显得更加的优雅，也更容易编写。

　　举例：

　　　　1. 异步调用：

　　　　　　假设现在我的一个页面中的一条数据需要我去后台查询两个接口才能完全返回，废话不说下面上代码：

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //这里会继续请求第二个接口，获取剩下的数据内容
            loadXMLDoc2（xmlhttp.responseText）
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
//loadXMLDoc2和loadXMLDoc方法类似，此处就不再详细写。。。

　　此时是通过两个接口查询所有的数据，那如果是三个或者四个或者更多呢....,当然也是可以这种方式来实现的，但是后期维护起来的成本就会逐倍增加，因为后面维护的小伙伴会通过你写的代码去逐层去走，假如第二个接口的数据出现问题也要从第一个接口的代码处开始捋，这样就会给维护扩展工作带来很大的不便。

　　但是如果我们用Promise对象来重构这段代码，整个流程就会看起来清晰，废话不多说继续上代码：

function loadXMLDoc()
{
　　var load_Promise = new Promise(function(resolve, reject){

　　　　var xmlhttp;

    　if (window.XMLHttpRequest)
    　　{
        　　//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        　　xmlhttp=new XMLHttpRequest();
    　　}
    　　else
    　　{
        　　// IE6, IE5 浏览器执行代码
        　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    　　}
    　　xmlhttp.onreadystatechange=function()
    　　{
        　　if (xmlhttp.readyState==4 && xmlhttp.status==200)
        　　{
            　　//这里会继续请求第二个接口，获取剩下的数据内容
            　　//loadXMLDoc2（xmlhttp.responseText）
　　　　　　　　　　resolve(xmlhttp.responseText);//这里是用来then方法中接受参数的时候调用
        　　}
    　　}
    　　xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    　　xmlhttp.send();

    });

    return load_Promise; }
//调用方式
loadXMLDoc().then(function(data){
　　//data就是指的是我们传入的xmlhttp.responseText;
　　//此时可以处理data的数据结构等等
　　...
　　//在最后一个定要return一个Promise对象 不然我们的链式调用就会断
　　return loadXMLDoc2();
}).then().then().catch();

　　此处我们通过promise对象来重构了我们异步操作的代码，整个代码的流程看起来会比较舒服，也就是用一个同步的方式来编写了异步的操作，对于那些不太熟悉异步操作原理的人来说，使用Promise对象的方式也会更加容易接受。

ES6的promise函数用法讲解

猜你喜欢