1.什么叫回调地狱?
首先要理解回调地狱的概念:
地狱嘛 顾名思义,有很多层,就是在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱.
示例
调用接口,请求第6个省的第1个市下的地区列表
这是一段普通的回调地狱:
axios.defaults.baseURL='http://ajax-api.itheima.net'
// 回调地狱 一层嵌套一层
axios.get('/api/province').then(res => {
const provinces=res.data.data[16]
// console.log(provinces);
axios.get('api/city?pname='+provinces).then(res => {
const citys=res.data.data[4]
// console.log(citys);
axios.get(`api/area?pname=${provinces}&cname=${citys}`).then(res => {
console.log(res.data.data);
})
})
})
这种回调地狱的缺点:
1:代码可复用性不强
2:可阅读性差
3:可维护性(迭代性差)
4:扩展性差
2.用promise优化回调地狱
// promise 优化回调地狱
// 发多个请求 后一个请求要依赖上一个的返回值
// 返回值为一个promise对象提供给下一个请求 去触发then的执行 不会出现一个套一个的情况
let provinces;
axios.get('/api/province').then(res => {
provinces=res.data.data[16]
return axios.get('api/city?pname='+provinces)
}).then(res => {
const citys=res.data.data[4]
return axios.get(`api/area?pname=${provinces}&cname=${citys}`)
}).then(res => {
console.log(res.data.data);
})
用promise去解决回调地狱就可以避免一层嵌套一层的情况出现,它可以根据.then的链式调用把Promise对象串联起来.
3.用async和await 优化回调地狱
// async和await 优化回调地狱
// 用async和await 去替换掉then 可以直接提取到promise的值
async function fn(){
const provinces=await axios.get('/api/province')
const pname=provinces.data.data[16]
const citys=await axios.get('api/city?pname='+pname)
const cname=citys.data.data[4]
const areas=await axios.get(`api/area?pname=${pname}&cname=${cname}`)
// console.log(areas.data.data);
// 返回值是一个promise对象
return areas.data.data
}
// 不在里面log打印的话 在外面也需要重新用async和await 提取promise对象的值去打印
async function t(){
const f=await fn()
console.log(f);
}
t()
使用async-await搭配promise,可以通过编写形似同步的代码来处理异步流程,提高代码简洁和可读性.
优点:
1.解决了回调地狱一层套一层的问题
2.可以添加return返回值 return xxx