Promise

Promise 是什么？

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

为什么会有Promise？

为了避免界面冻结（任务）

同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说：对不起我是 ‘ 同步 ’ 服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人得一个大动作完成之后，才能再来招呼你，这个便是同步得问题：也就是 ‘顺序交付得工作1234’，必须按照1234得顺序完成；
异步：则是将耗时很长得A交付得工作交给系统之后，就去继续做B交付得工作。等到系统完成了前面得工作之后，在通过回调或者事件，继续做A剩下得工作。
AB工作得完成顺序，和交付他们得时间顺序无关，所以叫做 “异步”

异步操作得常见语法

事件监听

 document.getElementById('start').addEventListener('click', start, false);
 function start() {
        // 响应事件，进行相应得操作
        // jquery on 监听
        // $('#start').on('click', start)
 }

回调

    // 比较常见的有 ajax;
    $.ajax({
        url: 'www.aizhoujin.top/',
        method: 'get',
        success: function (res) {
            // 这里可以监听res返回的数据做回掉逻辑的处理;
        }
    })
    
    // 或者在页面加载完毕后回调
    $(function () {
        // 页面结构加载完成， 做回调逻辑处理;
        
    })

有了NodeJs之后，对异步的依赖进一步加剧了

大家都知道在nodeJs出来之前的php、java、python等后台语言已经很成熟了，nodejs要想能够有自己的一片天，那就的拿出点自己的绝活；
无阻塞高并发，是nodeJs的招牌，要达到无阻塞改并发异步是其基本保障;
举例：查询数据从数据库，PHP第一个任务查询数据，后面有了什么新的任务，那么后面任务会被挂起排队；而nodeJs是第一个任务挂起交给数据库取跑，然后取接待第二个任务交给对应的系统组件去处理挂起，接着去接待第三个任务;
那这样子的处理必然要依赖与异步操作

异步回调的问题：

之前处理异步是通过纯粹的回调函数的形式进行处理
很容易进入到回掉地狱中，剥夺了函数return的能力
问题可以解决，但是难以读懂，维护困难
稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护

回调地狱

    // 请求第一个API，地址在北京的公司的id
    $.ajax({
        url: 'www.aizhoujin.top/lagou/city',
        dataType: 'JSON',
        success: function (resCity) {
            let fintCityId = resCity.filter(item => {
                if (item.id == 'c1') {
                    return item;
                }
            })[0].id;

            // 请求第二个API；根据上一个返回的在北京公司的id “findCityId” , 找到在北京公司的第一家公司的id；
            $.ajax({
                url: 'www.aizhoujin.top/lagou/postion',
                dataType: 'json',
                success: function (resPostion) {
                    let fintPostionId = resPostion.filter(item => {
                        if (item.cityId == fintCityId) {
                            return item;
                        }
                    })[0].id;

                    // 请求第三个API，根据上一个API的id (findPostionId) 找到具体公司，查看详情
                    $.ajax({
                        url: 'www.aizhoujin.top/lagou.company',
                        dataType: 'json',
                        success: function (resCompany) {
                            let companyInfo = resCompany.filter(item => {
                                if (fintPostionId == item.id) {
                                    return item;
                                }
                            })[0];
                            console.log(companyInfo);
                        }
                    })
                }
            })
        }
    })

一般情况我们一次性调用API就可以完成请求。
有些情况我们需要多次调用服务器API，就会形成一个链式调用，比如为了完成一个功能，我们需要调用API1、API2、API3，依次按照顺序进行调用，这个时候就会出现回调地狱的问题;

promise

pormise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以(闭包除外)
并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
代码风格，容易理解，便于维护
多个异步等待合并便于解决

promise详解

    new Promise(function (resolve, reject) {
        resolve('成功'); // 数据处理完成
        reject('失败'); // 数据处理出错
    }.then((res) => {
            console.log(res); // 成功
        },
        (err) => {
            console.log(err); //失败
        }))

reslvoe 作用是将Promise对象的状态从" 未完成 " 变成 “成功” （即从 pending 变成 resolved ），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject 作用是将Promise对象的状态从 "未完成" 变成 “成功” （即从 pending 变成 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数场地出去；
promise有三个状态：
1、pending[待定] 初始状态
2、fufilled[实现] 操作成功
3、rejected [被否决] 操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤
promise状态一经改变,不会在变；
promise对象的状态改变，只有两种可能：
从pending变成fulfilled
从pending变成rejected
这两种情况只要发生，状态就凝固了，不会在变化了；

** 最简单示例**

    new Promise(resolve => {
        setTimeout(() => {
            resolve('hello');
        }, 2000);
    }).then(res => {
        console.log(res);
    })

** 分两次，顺序执行**

    new Promise(resolve => {
        setTimeout(() => {
            resolve('hello');
        }, 2000)
    }).then(val => {
        console.log(val); // 参数val = 'hellp'
        return new Promise(resolve => {
            setTimeout(() => {
                resolve('world');
            }, 2000)
        })
    }).then(val => {
        console.log(val) // 参数val = 'world'
    })

promise完成后then()

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

假如在.then()的函数里面不返回新的Promise，会怎样？

.then()

1、接收两个函数作为参数，分别代表 fulfilled (成功）和rejected（失败）
2、.then()返回一个行的Promise实例，所以它可以链式调用
3、当前的Promise状态改变时，.then() 根据其最终状态，选择特定的状态响应函数执行
4、如果返回新的Promise，那么下一级 .then 会在新的promise状态改变之后执行
5、状态响应函数可以返回新的promise，或其他值，不返回值也可以，我们可以认为它返回了一个null
6、如果返回其他任何值，则会立即执行下一级 .then()

.then()里面有.then()的情况
1、因为 .then() 返回的还是Promise实例
2、会等里面的 then() 执行完，在执行外面的

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

then嵌套

对于我们来说，此时最好将其展开，也是一样的结果，而且会更好读：

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

错误处理

Promise会自动捕获内部异常，并交给rejected响应函数处理；
1、第一种错误处理

    new Promise((resolve) => {
        setTimeout(() => {
            throw new Error('bye');
        }, 2000)
    }).then((value) => {
        console.log(value);
    }).catch(error => {
        console.log('Error', error);
    })

2、第二种错误处理

    // 第二种错误处理
    new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('bye');
        }, 2000)
    })
        .then((val) => {
            console.log(val)
        }, (err) => {
            console.log('Error:' + err);
        })

错误处理的两种做法：
第一种： reject('错误信息') .then(() => {}, () => {错误处理逻辑})
第二种： throw new Error('错误信息').catch( () => {错误处理逻辑} )
推荐使用第二种方式，更加清晰好读，并且可以捕获前面所有的错误（可以捕获N个then回调错误）

catch() + then()

第一种情况：

    console.log('here we go...')
    new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, 2000)
    })
        .then(() => {
            console.log('start');
            throw new Error('test error');
        })
        .catch(err => {
            console.log('I catch:', err);
        })
        .then(() => {
            console.log('arrive here');
        })
        .then(() => {
            console.log('...and here');
        })
        .catch(err => {
            console.log('No, I catch:', err)
        })

结果：

catch+then(1).png

结论：

catch也会返回一个promise实例，并且时resolved状态

第二种情况

    console.log('heoe we go..')
    new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, 2000)
    })
        .then(() => {
            console.log('start');
            throw new Error('test error');
        })
        .catch(err => {
            console.log('1 catch: ', err);
            throw new Error('another error');
        })
        .then(() => {
            console.log('arrlve here');
        })
        .then(() => {
            console.log('...and here');
        })
        .catch(err => {
            console.log('No, I catch', err)
        })

结果

catch + then (2).png