17.1 Promise是什么？

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 300px;
            height: 300px;
            background-color: red;
            transition: all 0.5s;
        }
    </style>

     <div id="box"></div>

    // 1.认识Promise
    // Promise是异步操作的一种解决方案
    document.addEventListener('click', () => {
        console.log('这里是异步的');
    })
    console.log('这里是同步的');

    // 2.什么时候使用Promise
    // Promise 一般来解决层层嵌套的回调函数(回调地狱 callback hell)的问题
    const move = (el, { x = 0, y = 0 } = {}, end = () => { }) => {
        el.style.transform = `translate3d(${x}px,${y}px,0)`;

        el.addEventListener(
            'transitionend',
            () => {
                // console.log('end');
                end();
            },
            false
        );
    };
    const boxEl = document.getElementById('box');

    document.addEventListener('click', () => {
        move(boxEl, { x: 150 }, () => {
            move(boxEl, { x: 150, y: 150 }, () => {
                move(boxEl, { y: 150 }, () => {
                    move(boxEl, { x: 0, y: 0 })
                })
            })
        })
    }, false)

17.2、Promise的基本用法

    // 1. 实例化构造函数生成的实例对象
    // promise解决的不是回调函数，而是回调地狱
    // const p = new Promise(()=>{})

    // 2. Promise的状态
    const p = new Promise((resolve,reject)=>{
        // Promise有3种状态，一开始是pending(未完成),执行的resolve，变成rejected，以失败

        // Promise的状态一旦变化，就不会在改变了
        // pending->fulfilled
        // resolve();

        // pending->rejected
        reject();
    })
    console.log(p);
    
    // 3. then()方法
    p.then(
        ()=>{
            console.log('success');
    },
        ()=>{
            console.log('error');
    }) 

18.1 then()

    // 1. 什么时候执行
    // pending->fulfilled时，执行then的第一个回调函数
    // pending->rejected时，执行then的第二个回调函数

    // 2. 执行后的返回值
    // then方法执行后返回一个新的Promise对象
    const p = new Promise((resolve,reject)=>{
        resolve();
        // reject()
    })
    p.then(
        ()=>{},
        ()=>{}
    )

    // 3. then方法返回的Promise对象的状态改变
    const p = new Promise((resolve,reject)=>{
        resolve();
        // reject()
    })
    p.then(
        ()=>{
            console.log('success');
        },
        ()=>{
            console.log('err');

            //在then的回调函数中，return后面的东西，会用Promise包装一下
            // return undefined
            // 等价于
            // return new Promise((resolve,reject)=>{
            //     resolve(undefined)
            // })

            // 默认返回的永远都是成功状态的promise对象
        }
    ).then(
        ()=>{
            console.log('success2');
        },
        ()=>{
            console.log('err');
        }
    )

18.2 Promise解决回调地狱

    * {
        padding: 0;
        margin: 0;
    }
    #box {
        width: 300px;
        height: 300px;
        background-color: red;
        transition: all 0.5s;
    }
    
    <div id="box"></div>
    
    // 运动
    const move = (el, { x = 0, y = 0 } = {}, end = () => { }) => {
        el.style.transform = `translate3d(${x}px,${y}px,0)`

        el.addEventListener(
            'transitionend',
            () => {
                end();
            },
            false
        )
    }

    const boxEl = document.getElementById('box');

    const movePromise = (el,point)=>{ // point是x,y的坐标
        return new Promise((resolve)=>{
            move(el,point,()=>{
                resolve()
            })
        })
    }

    document.addEventListener('click',()=>{
        movePromise(boxEl,{x:150}).then(()=>{
            return movePromise(boxEl,{x:150,y:150});
        }).then(()=>{
            return movePromise(boxEl,{y:150});
        }).then(()=>{
            return movePromise(boxEl,{x:0,y:0});
        })
    },false)



    // document.addEventListener('click',() => {
    //         move(boxEl, { x: 150 }, () => {
    //             move(boxEl, { x: 150, y: 150 }, () => {
    //                 move(boxEl, { y: 150 }, () => {
    //                     move(boxEl, { x: 0, y: 0 })
    //                 })
    //             })
    //         })
    //     },
    //     false)
    

18.3 catch()

    // 1. 有什么用
    // then(
    //     data => {},
    //     arr => {}
    // )
    // then(data=>{})

    // // catch专门用来处理rejected状态
    // // catch本质上是then的特例
    // then(null,err=>{})

    new Promise((resolve,reject)=>{
        reject('reason');
    }).then(data=>{
        console.log(data);
    }).catch(err=>{
        console.log(err);
    }).then(data=>{
        console.log(data);
    })
    // catch()可以捕获它前面的错误
    // 一般总是建议，promise对象后面要跟catch方法，这样可以处理promise内部发生的错误

18.4 finally

    // 1. 什么时候执行
    // 当promise状态发生变化时，不论如何变化都会执行，不变化不执行
    // new Promise((resolve,reject)=>{
    //     reject('reason');
    // }).finally(data=>{
    //     console.log(data);
    // }).catch(err=>{})

    // 本质
    // finally()本质上是then()的特例
    // new Promise((resolve,reject)=>{
    //     reject('reason');
    // }).finally(data=>{
    //     console.log(data);
    // }).catch(err=>{})
    // 等同于
    new Promise((resolve,reject)=>{
        // resolve(123)
        reject('reason');
    })
    .then(result=>{
        return result;
    },err=>{
        // throw err; // 简写
        return new Promise((resolve,reject)=>{
            reject(err)
        })
    })
    .then(data=>{
        console.log(data);
    }).catch(err=>{
        console.log(err);
    })