promise链式调用解决回调地狱问题

回调地狱

当我们使用axios链接服务器，调取类似父子级关系式，回调函数可能会使用到重复嵌套的结构。

特性：

1.可读性差

2.异常无法捕获

3.耦合性严重

promise链式调用

依靠then（）方法会返回一个新生成的promise对象特性，继续串联下一环任务，直到结束。每个promise对象管理一个异步任务，用then返回promise对象，串联起来。

举例：

获取国家promise对象

.then（回调函数）

新的promise对象

.then（回调函数）

新的promise对象

.then（回调函数）

return获取省份promise对象

return获取城市promise对象

细节：

then（）回调函数中的返回值，会影响新生成的promise对象最终状态和结果

通过链式调用，解决回调函数嵌套问题

代码举例：

let guoJia = ''//promise链式调用让两个回调函数成为兄弟关系，无法访问前一级的对象，故声明全局变量，赋值后下一个回调函数仍可以使用
//得到国家promise对象
axios({url:'#/country'}).then(result=>{
guoJia = result.data.list[0]
document.querySelector('.country').innerHTML = guoJia
//得到省份promise对象
return axios({url:'#/country'，params:{guoJia}})
}).then(result=>{
const shengFeng = result.data.list[0]
document.querySelector('.province').innerHTML = shengFeng
//得到地区promise对象
return axios({url:'#/province'，params:{shengFeng}})
}).then(result=>{
const areaName = result.data.list[0]
document.querySelector('.area').innerHTML = areaName
//输出反馈获取值
console.log(result)
})