回调地狱与promise

<script src="js/ajax.js"></script>
    <script>
        // function fn(a){
        //     a()
        // }
        // fn(function(){})

        // let arr = ['a', 'b']
        // arr.sort(function(){})

        // setTimeout(function(){
        //     console.log('第一次执行')
        //     setTimeout(function(){
        //         console.log('第二次')
        //         setTimeout(function(){
        //             console.log('第三次')
        //         }, 1000)
        //     }, 1000)
        // }, 1000)

        /*
            比如我们发送三个 ajax 请求
            - 第一个正常发送
            - 第二个请求需要第一个请求的结果中的某一个值作为参数
            - 第三个请求需要第二个请求的结果中的某一个值作为参数
        */
        ajax_get({
            url: 'data/a.php',
            success(res){
                console.log(res)
                console.log('第一次的结果')
                ajax_get({
                    url: 'data/b.php',
                    query: {a: res},
                    success(res){
                        console.log(res)
                        console.log('第二次的结果')
                        ajax_get({
                            url: 'data/c.php',
                            query: { b: res },
                            success(res){
                                console.log(res)
                                console.log('第三次的结果')
                            }
                        })
                    }
                })
            }
        })

        //事件为什么是异步执行？不会阻塞其他代码执行

//resolve 成功的回调，承诺兑现
        //reject 失败的回调，承诺没有兑现
        //Promise只是一个'小工具'，为了解决回调地狱存在，本身没有其他的功能
        // let p = new Promise((resolve, reject)=>{
        //     //resolve()
        //     reject()
        // })

        //console.log(p.__proto__)

        //链式调用，链式写法
        //成功时执行的回调函数
        // p.then(()=>{
        //     console.log('成功了')
        // //失败时执行的回调函数
        // }).catch(()=>{
        //     console.log('失败了')
        // //无论成功还是失败都会执行的回调函数
        // }).finally(()=>{
        //     console.log('成功或者失败都会执行')
        // })
            
        

        //需求：用户承诺2秒后输入一个大于10的数字？
        // function fn(){
        //     return new Promise((resolve, reject)=>{
        //         setTimeout(()=>{
        //             let num = prompt('请输入一个数字?')
        //             if(num>10){
        //                 resolve()
        //             }else{
        //                 reject()
        //             }
        //         }, 2000)
        //     })
        // }
        // fn().then(()=>{
        //     console.log('恭喜你喜提冰墩墩！')
        // }).catch(()=>{
        //     console.log('已经被抢完了!')
        // })

链式写法
function Person(name){
            this.name = name
            this.say = function(){
                console.log(this.name + '喜欢经常骚扰小姐姐')
                //console.log(this)
                //this.say()
                return this
            }
            this.rg = function(){
                console.log(this.name + '喜欢晚上去公园里面的小树林')
            }
        }
        let p = new Person('冯建炜')
        p.say().rg()
        this返回成函数本身再调用

promise封装ajax
/*
                ajax_get封装
                + url地址
                + query查询字符串
                + success成功回调函数
                + error失败回调函数
            */
            function pAjax(options) {
                return new Promise((resolve, reject)=>{
                    let xhr = new XMLHttpRequest()
                    //判断地址不能为空
                    if (!options.url) {
                        alert('地址不能为空')
                        return
                    }
                    //查询字符串处理
                    if (options.query) {
                        let str = '?'
                        for (let key in options.query) {
                            str += `${key}=${options.query[key]}`
                            str += '&'
                        }
                        str = str.slice(0, -1)
                        //请求参数
                        xhr.open('get', options.url + str)
                    } else {
                        xhr.open('get', options.url)
                    }
                    //发送请求
                    xhr.send()
                    //监听请求状态
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200) {
                                 resolve(xhr.response)
                            } else {
                                reject()
                            }
                        }
                    }
                })
            }
            pAjax({url: 'data/a.php'})
            .then((res)=>{
                console.log(res)
            })
    </script>

<script src="js/ajax.js"></script>
    <script>
        /*
            ajax_get({
            url: 'data/a.php',
            success(res){
                console.log(res)
                console.log('第一次的结果')
                ajax_get({
                    url: 'data/b.php',
                    query: {a: res},
                    success(res){
                        console.log(res)
                        console.log('第二次的结果')
                        ajax_get({
                            url: 'data/c.php',
                            query: { b: res },
                            success(res){
                                console.log(res)
                                console.log('第三次的结果')
                            }
                        })
                    }
                })
            }
        })
        */
        //Promise最大的好处是让咱们把异步的代码可以写成同步形式，本质上不变（异步）
        pAjax({url: 'data/a.php'})
        .then((res)=>{
            console.log(res)
            console.log('第一次的结果')
            return pAjax({url: 'data/b.php', query: {a: res}})
        })
        .then((res)=>{
            console.log(res)
            console.log('第二次的结果')
            return pAjax({ url: 'data/c.php', query: { b: res } })
        })
        .then((res)=>{
            console.log(res)
            console.log('第三次的结果')
        })
    </script>