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

在有关回调地狱的学习中出现了多种解决方法下面是根据学过的知识，整理出来的一份总结
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 = https://www.it610.com/article/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;