总结 回调地狱的解决方法 以及可迭代对象

在有关回调地狱的学习中 出现了多种解决方法 下面是根据学过的知识，整理出来的一份总结
1 首先是promise解决回调地狱 的方法
(1)解决一个ajax的时候

   function jq_pro(url,data){
            return $.ajax({
                url,
                data,
                dataType:"json",
            })
        }

        jq_pro("a.json").then(res=>{
            delDate(res);
        },res=>{

        })

(2)解决多个ajax的时候（互有联系）

 // 1.原生的写法
        function js_pro(url) {
            return new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.open("get", url, true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            var data = xhr.responseText;
                            resolve(data);
                        } else {
                            reject("404");
                        }
                    }
                }
            })
        }

        js_pro("a.json").then(res=>{

            return js_pro("b.json")
        },res=>{

        }).then(res=>{
            return js_pro("c.json")
        }).then(res=>{
            delDate(res);
        })

        function delDate(data){
            console.log(data);
        }


        //jq写法

        function jq_pro(url,data){
            return $.ajax({
                url,
                data,
                dataType:"json",
            })
        }

        jq_pro("a.json").then(res=>{

            return jq_pro("b.json",{name:res})
        },res=>{

        }).then(res=>{
            return jq_pro("c.json")
        }).then(res=>{
            delDate(res);
        })

(3)解决多个ajax（互相之间没有关系）
race请求多个promise 只不过是只要有一个响应成功了就会触发.then

function jq_pro(url,data){
    return $.ajax({
        url,
        data,
        dataType:"json"
    })
}

Promise.all([
    jq_pro("a.json"),
    jq_pro("b.json"),
    jq_pro("c.json")
]).then(res=>{
    console.log(res);
    let [a,b,c]=res;
    delData1(a);
    delData1(b);
    delData1(c);

})

function delData1(res){
    console.log(res)
}

2 async解决回调函数
(1) async的语法:
async和await关键字搭配使用 async函数永远返回一个promise对象,如果函数里有返回值的话，在这个async执行之后的.then方法里能拿到
await是等待的意思后面一般跟一个promise对象,await会让他后面的promise对象自动执行,执行完成后才会继续执行下一句代码

(2) 特点：
用同步的写法执行异步的操作
(3) async处理回调地狱写法

 async function fun1(){
        let data1=await js_pro("a.json");
        let data2=await js_pro("b.json");
        let data3=await js_pro("c.json");
        return data3;
    }
    console.log(fun1())
    fun1().then(res=>{
        console.log(res);
    }).catch(res=>{
        console.log(res)
    })

(4)有关await的用法

  var pro=new Promise(function(resolve,reject){
            setTimeout(function(){
                console.log("await的计时器")
                resolve();
            },3000)
        })
        async function fun2(){
          await pro;//等待计时器的执行,
          console.log("aaaa")//计时器执行完后,也就是3000毫秒之后执行console.log
        }
        console.log(fun2())
        // fun2().then(res=>{
        //     console.log(res);
        // })

        function fun3(){
            setTimeout(function(){
                console.log("同步函数计时器")
            },3000)
            console.log("同步代码aaa")
        }
        fun3();

3 generator(生成器函数) 解决回调地狱
(1) 特点：
generator除了用return 还可以用yield 返回多次， 只要碰到yield 函数执行就会暂停，暂停了之后如果想继续执行 用next方法继续执行
generator调用next方法返回的是一个json，里面的value是yield返回的值 done是这个函数有没有执行完毕
(2) 与普通函数，async函数的区别：
generator函数跟普通函数的区别 generator函数可以暂停
generator函数和async函数的区别 async函数在等待了之后会自动的继续往后执行，generator函数暂停了之后需要手动调用next方法才能继续往后执行
(3) 写法：

  function * ger(){
            yield js_pro("a.json");
            yield js_pro("b.json");
            yield js_pro("c.json");
        }   
    var obj=ger();
     obj.next().value.then(res=>{
         return obj.next().value
     }).then(res=>{
         console.log(res);
         return obj.next().value
     }).then(res=>{
         console.log(res);
     })

4 可迭代对象
(1)可迭代对象有：数组 nodeList 字符串 set map
(2)for of循环只能循环可迭代对象
(3)generator生成器生成的是一个迭代器
(4) 可迭代对象的Symbol.iterator属性可以把可迭代对象变成一个迭代器，就可以去执行next()方法

   var arr=["a"，"b"," c"]
    var obj=arr[Symbol.iterator]();
    console.log(obj.next());	//done:false; value:"a";
    console.log(obj.next());	//done:false; value:"b";
    console.log(obj.next());	//done:false; value:"c";
    console.log(obj.next());	//done:true;  value:undefined;