jq回调地狱

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script src="JQuery.js"></script>
    <script>
        // 拿到a的数据后才去请求b,拿到b的数据后再去请求c 这就叫回调地狱
        // 像这种回调嵌套回调的写法就叫回调地狱
        // $.ajax({
        //     method: "get",
        //     url: "data.json",
        //     success(res) {
        //         console.log(res);
        //         $.ajax({
        //             method: "get",
        //             url: "data2.json",
        //             success(res) {
        //                 console.log(res);
        //                 $.ajax({
        //                     method: "get",
        //                     url: "data3.json",
        //                     success(res) {
        //                         console.log(res);
        //                     },
        //                 });
        //             },
        //         });
        //     },
        // });

        //jq的ajax本身就是一个promise对象
        // $.ajax({
        //         method: "get",
        //         url: "data.json",
        //     })
        //     .then((res) => {
        //         console.log(res);
        //         return $.ajax({
        //             method: "get",
        //             url: "data2.json",
        //         });
        //     })
        //     .then((res) => {
        //         console.log(res);
        //         return $.ajax({
        //             method: "get",
        //             url: "data3.json",
        //         });
        //     })
        //     .then((res) => {
        //         console.log(res);
        //         console.log("最终拿到的", res);
        //     });
        //用promise 的方法处理回调地狱

        // es7的时候出了一个async和await 是解决回调地狱的终极方案

        async function getdata() {
            let data = await $.ajax({
                method: "get",
                url: "data.json"
            });
            console.log(data);

            let data2 = await $.ajax({
                method: "get",
                url: "data2.json"
            });
            console.log(data2);
            let data3 = await $.ajax({
                method: "get",
                url: "data3.json",
            });
            console.log(data3);
            return data3;
        }
        // async函数return的永远是一个promise对象
        getdata().then((res) => {
            console.log(res);
        });


        // function handler() {
        //     let data = ""
        //     $.ajax({
        //         method: "get",
        //         url: "data.json",
        //         success(res) {
        //             data = res;
        //         }
        //     });
        //     console.log(data);
        // }
        // handler()


        function* getdata2() {
            yield $.ajax({
                method: "get",
                url: "data.json"
            })
            yield $.ajax({
                method: "get",
                url: "data2.json"
            })
            yield $.ajax({
                method: "get",
                url: "data3.json"
            })
        }

        let obj = getdata2();
        obj.next().value.then(res => {
                console.log(res);
                return obj.next().value
            }).then(res => {
                console.log(res);
                return obj.next().value
            }).then(res => {
                console.log("generator拿到的数据", res);
            })
            //用generator处理回调地狱 但是这种写法一般不用因为async已经取代了generotor
    </script>
</body>

</html>

</html>