在回调函数里面嵌套回调函数,这样的就叫回调地狱,例如ajax发多个请求的时候,下一次请求要用要上一次请求的结果,这种嵌套的回调函数就是回调地狱。
什么叫回调函数呢? 就是在调用函数时,把函数体作为实参传入到另一个函数内,它就是一个回调函数了。例如异步任务都有回调函数的应用。
promise优化回调地狱 & async await 优化回调地狱
promise优化回调地狱 原理就是axios.get() 它相当于let p=axios.get() 也是一个promise对象,promise对象都有.then方法。
async await优化回调地狱的原理是async修饰后的函数 它的返回值就是await axios.get() 所以这里可以省略.then 用一个变量直接接收await axios.get()的返回值。再在函数外面接收这个函数的返回值。
// 普通回调地狱
// 目标: 获取所有省市区数据, 随便获取
// 1. 获取所有省份列表
// axios.get('http://ajax-api.itheima.net/api/province').then(res => {
// // 2. 获取某个省, 对应的城市列表
// let pname = res.data.data[5];
// axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`).then(res => {
// // 3. 获取某个市, 对应的地区列表
// let cname = res.data.data[0]
// axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`).then(res => {
// console.log(res);
// })
// })
// })
// 上面的代码就出现了回调地狱
// 概念: 在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱
// Promise优化写法 处理错误也比较方便
// axios.get() 它相当于let p=axios.get() 也是一个promise对象
// let pname=''
// axios.get('http://ajax-api.itheima.net/api/province').then(res => {
// 2. 获取某个省, 对应的城市列表
// pname = res.data.data[5];
// return axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`)
// }).then((res)=>{
// let cname = res.data.data[0]
// return axios.get(`http://ajax-api.itheima.net/api/area?
pname=${pname}&cname=${cname}`)
// }).then(res=>{
// console.log(res.data.data);
// }).catch(err=>{
// console.log('这里有错误');
// })
// async await优化回调地狱
axios.defaults.baseURL = 'http://ajax-api.itheima.net'
async function fn() {
const province = await axios.get('/api/province')
const pname = province.data.data[5]
const city = await axios.get(`/api/city?pname=${pname}`)
const cname = city.data.data[0]
console.log(cname);
const areas = await axios.get(`/api/area?pname=${pname}&cname=${cname}`)
// console.log(areas.data.data);
return areas.data.data
}
// 下面两种方法拿到封装函数的返回值
// 第一种
fn().then(res => {
console.log(res);
})
// 第二种
// async function f(){
// const p =await fn()
// console.log(p);
// }
// f()
好文链接
发表评论