回调地狱的优化

// 目标: 获取所有省市区数据, 随便获取 // 1. 获取所有省份列表 // 2. 获取某个省, 对应的城市列表 // 3. 获取某个市, 对应的地区列表

axios.get('http://ajax-api.itheima.net/api/province').then(res => {
    let pname = res.data.data[5];
    axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`).then(res => {
        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_解决回调地狱

// 目标: 使用Promise的链式调用解决问题 // 前提: axios函数在原地返回的就是一个Promise对象 // 2. 获取某个省, 对应的城市列表 // 3. 获取某个市, 对应的地区列表

let pname = ''
axios.get('http://ajax-api.itheima.net/api/province').then(res => {
    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);
})

优化回调地狱

// 目标: 使用Promise的链式调用解决问题 // 前提: axios函数在原地返回的就是一个Promise对象

async function f() {
  const provinces = await axios.get('http://ajax-api.itheima.net/api/province')
  const pname = provinces.data.data[5]
  const citys = await axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`)
  const cname = citys.data.data[0]
  const areas = await axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`)
	return areas
}
f()