地狱回调，promise链式调用，async/await

同步代码：逐行执行，原地等待结果，才继续向下执行

异步代码：调用后耗时，不阻塞代码执行，将来完成后触发回调函数(setTimeout,setInterval,事件,ajax)

异步代码依靠回调函数接受

回调函数地狱:在回调函数中嵌套函数回调，一直嵌套下去就形成了地狱回调

缺点：可读性差，异常无法捕获，耦合性严重

地狱回调

axios({
  url: 'https://hmajax.itheima.net/api/province'
}).then(result => {
  // 获取省份信息并显示在页面
  provinceList.value = result.data.list
  province.value = provinceList.value[0]
  axios({
    // 根据省份信息获取城市信息并显示在页面
    url: 'https://hmajax.itheima.net/api/city'
    , params: { pname: province.value }
  }).then(result => {
    cityList.value = result.data.list
    city.value = cityList.value[0]
    axios({
      // 根据省份和城市信息获取地区信息并显示在页面
      url: 'https://hmajax.itheima.net/api/area'
      , params: { pname: province.value, cname: city.value }
    }).then(result => {
      areaList.value = result.data.list
      area.value = areaList.value[0]
    }).catch(error => {

    })
  }).catch(error => {

  })
}).catch(error => {

})

promise链式调用

解决了结构嵌套问题，返回一个promise对象供下一级使用

axios({
  url: 'https://hmajax.itheima.net/api/province'
}).then(result => {
  // 获取省份信息并显示在页面
  provinceList.value = result.data.list
  province.value = provinceList.value[0]
  return axios({
    // 根据省份信息获取城市信息并显示在页面
    url: 'https://hmajax.itheima.net/api/city'
    , params: { pname: province.value }
  })
}).then(result => {
  cityList.value = result.data.list
  city.value = cityList.value[0]
  return axios({
    // 根据省份和城市信息获取地区信息并显示在页面
    url: 'https://hmajax.itheima.net/api/area'
    , params: { pname: province.value, cname: city.value }
  })
}).then(result => {
  areaList.value = result.data.list
  area.value = areaList.value[0]
})

async/await

用async和await解决地狱回调

async写在函数前面，表示此函数为异步函数，不会阻塞代码。函数返回是一个promise对象

await写在异步代码前，阻塞代码块，等待当前异步执行结束后放行

const getData = async () => {
  const result1 = await axios({
    url: 'https://hmajax.itheima.net/api/province'
  })
  provinceList.value = result1.data.list
  province.value = provinceList.value[0]

  const result2 = await axios({
    // 根据省份信息获取城市信息并显示在页面
    url: 'https://hmajax.itheima.net/api/city'
    , params: { pname: province.value }
  })
  cityList.value = result2.data.list
  city.value = cityList.value[0]

  const result3 = await axios({
    // 根据省份和城市信息获取地区信息并显示在页面
    url: 'https://hmajax.itheima.net/api/area'
    , params: { pname: province.value, cname: city.value }
  })
  areaList.value = result3.data.list
  area.value = areaList.value[0]
}