AJAX---回调地狱及两种优化方案
什么是回调地狱
在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱。
回调地狱缺点
1:代码可复用性不强
2:可阅读性差
3:可维护性(迭代性差)
4:扩展性差
5:不够优雅
回调地狱
1 <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script> 2 <script> 3 // 目标: 获取所有省市区数据, 随便获取 4 // 1. 获取所有省份列表 5 axios.get('http://ajax-api.itheima.net/api/province').then(res => { 6 // 2. 获取某个省, 对应的城市列表 7 let pname = res.data.data[5]; 8 axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`).then(res => { 9 // 3. 获取某个市, 对应的地区列表 10 let cname = res.data.data[0] 11 axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`).then(res => { 12 console.log(res); 13 }) 14 }) 15 }) 16 </script>
优化方案一:通过Promise进行优化(ES6)
1 <script> 2 let pname 3 let cname 4 axios.get('http://ajax-api.itheima.net/api/province').then(res => { 5 pname = res.data.data[5] 6 return axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`) 7 }).then(res => { 8 cname = res.data.data[0] 9 return axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`) 10 }).then(res => { 11 // 得到要取的城市地区列表 12 console.log(res.data.data); 13 }).catch(err => { 14 console.log(err); 15 }) 16 </script>
特点:通过then链式调用把Promise对象串联起来 结果仍是一个Promise对象。
缺点:这种方式充满了 Promise 的 then() 方法,如果处理流程比较复杂的话,那么整段代码将充斥着 then,语义化不明显,代码不能很好地表示执行流程。
优化方案二:通过async和await优化(ES7)
1 <script> 2 axios.defaults.baseURL = 'http://ajax-api.itheima.net' 3 async function fn() { 4 const p = await axios.get('/api/province') 5 const pname = p.data.data[5] 6 const c = await axios.get(`/api/city?pname=${pname}`) 7 const cname = c.data.data[0] 8 const area = await axios.get(`/api/area?pname=${pname}&cname=${cname}`) 9 return area.data.data 10 // console.log(area.data.data); 11 } 12 13 async function f() { 14 const t = await fn() 15 console.log(t); 16 } 17 f() 18 </script>
特点:通过async和await 取代 then函数 来提取Promise的值。
优点:通过同步的方式写异步代码,提高了代码的可读性,可添加返回值,是异步编程的终极方案
本文来自博客园,作者:三井绫子,转载请注明原文链接:https://www.cnblogs.com/Ayako/p/16893849.html