Promise（一）

Promise  的重要性，四个字：必！须！掌！握！。

1.Promise为什么会出现？

　　在实际的使用中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。

　　最常见的一个场景就是Ajax请求。

　　通俗来讲，由于网速的不同，可能你得到返回值的时间也是不同的，这个时候我们就是需要等待；

　　结果出来之后才知道怎么样继续下去。

// 简单的ajax原生实现
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;

var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);
    }
}

　　在Ajax的原生实现中，利用了onreadystatechange事件，当该事件触发并且符合一定条件时，才能拿到想要的数据

之后才能开始处理数据。

这样做看上去并没有什么麻烦，但是如果这个时候，我们还需要林外一个Ajax请求，这个新Ajax请求的其中一个参数，

得从上一个ajax请求中获取，这个时候我们就不得不等待上一个接口请求完成之后，在请求后一个就扣。

如下：

var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;

var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);

        // 伪代码
        var url2 = 'http:xxx.yyy.com/zzz?ddd=' + result.someParams;
        var XHR2 = new XMLHttpRequest();
        XHR2.open('GET', url, true);
        XHR2.send();
        XHR2.onreadystatechange = function() {
            ...
        }
    }
}

当出现第三个Ajax的时候，甚至更多，每一个请求都依赖上一个请求，我们的代码就会成为一场灾难，这场灾难往往被称为回调地狱。

当然，除了回调地狱之外，还有一个非常重要的需求：为了代码更加具有可读性和可维护性，我们需要将数据请求与数据处理明确的区分开来。上面的写法，是完全没有区分开，当数据变得复杂时，也许我们自己都无法轻松维护自己的代码了。这也是模块化过程中，必须要掌握的一个重要技能，请一定重视