Promise：总结异步：是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作。等待系统完成前面的工作之后，

Promise MDN中文解释

Promise对象用于异步计算
一个Promise表示一个现在、将来或永不可能可用的值

Promise 按照用途来解释

主要用于异步计算
可用将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
可以在对象之间传递和操作Promise,帮助我们处理队列

为什么有Promise？

javaScript为检查表单而生
创建它的首要目标是操作DOM
所有，javaScript的操作大多是异步的

同步和异步

同步： 顺序交付的工作1234，必须按照1234的顺序完成

异步

异步：是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作。等待系统完成前面的工作之后，再通过回调或者事件，继续做A剩下的工作（AB工作的完成顺序，和交付他们的时间顺序无关）。
事件侦听与相应：

document.getElementById('start').addEventListener('click', start, false);

function start() {
    //响应事件，进行相应的操作
}

// jQuery用 '.on()'也是事件侦听
$('#start').on('click', start);

回调

嵌套层次很深，难以维护
无法正常使用return和throw
无法正常检索堆栈信息
多个回调之间难以建立联系

// 比较常见的有ajax
$.ajax('http://baidu.com', {
    success: function (res) {
        // 这里就是回调函数了
    }
})

// 或者在页面加载完毕后回调
$(function (){
    // 这里也是回调函数
})

回调地狱

a(function (a) {
    b(a, function(b){
        c(b, function(c) {
            d(c, function(d){
                console.log(d);
            })
        })
    })
})

Promise 详解

Promise 是一个代理对象，它和原来要进行的操作并无关系
它通过引入一个回调，避免更多的回调

Promise有3个状态：

pending[待定]初始状态
fulfilled[实现]操作成功
rejected[被否定]操作失败
Promise状态发现改变，就会触发.then()里的响应函数处理后续步聚
Promise 状态一经改变，不会再变

new Promise(
    // 执行器 executor
    function (resolve, reject) {
        // 一段耗时很长的异步操作
        resolve(); // 数据处理完成
        reject(); // 数据处理出错
    }
).then(function A() {
    // 成功，下一步
}, function B() {
    // 失败，做相应处理
})

最简单的实例

console.log('xiao');
new Promise(resolve => {
    setTimeout(()=>{
        resolve('lin');
    }, 2000);
}).then(value => {
    console.log(value + 'ni hao');
})

最简单的实例升级版

console.log('xiao');
new Promise(resolve => {
    setTimeout(()=>{
        resolve('lin');
    }, 2000);
}).then( value => {
    console.log(value);
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('world');
        }, 2000);
    })
}).then(value => {
    console.log(value + 'ni hao');
})

最简单的实例加强版

console.log('start');

let promise = new Promise(resolve => {
    setTimeout(() => {
        console.log('then promise fulfilled');
        resolve('hello, world');
    }, 2000)
});

setTimeout(() => {
    promise.then(value => {
        console.log(value);
    });
}, 3000)

案列

console.log('xiao');
new Promise(resolve => {
    setTimeout(()=>{
        resolve('lin');
    }, 2000);
}).then( value => {
    console.log(value);
    console.log('everyone');
    (function() {
       return new Promise(resolve => {
            setTimeout(() => {
                console.log('Mr.xiaolin')
                resolve('Mr.xiaolin');
            }, 2000);
       });
    }());
    return false;
    
}).then(value => {
    console.log(value + 'ni hao');
})

.then()

.then()接受两个函数作为参数，分别代表fulfilled和rejected
.then()返回一个新的Promise实例，所以它可以链式调用
当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
状态响应函数可以返回新的Promise，或其他值
如果返回新的Promise，那么下一级.then()会在新Promise状态改变之后执行
如果返回其它任何值，则会立刻执行下一级.then()

.then()里有.then()的情况

因为.then()返回的还是Promise实例
会等里面的.then()执行完，在执行外面的
对于我们来说，此时最好将其展开，会更好读

console.log('start');
new Promise(resolve => {
   console.log('Step 1')
    setTimeout(()=>{
        resolve(100);
    }, 1000);
}).then( value => {
    console.log(value);
    return new Promise(resolve => {
        console.log('Step 1-1')
        setTimeout(() => {
            resolve(110);
        }, 1000);
    })
}).then(value => {
    console.log('Step 1-2');
    return value;
}).then(value => {
    console.log('Step 1-3');
    return value;
})
.then( value => {
   console.log(value);  
 })

有不正确请指正后续更新。。。