省市县联动结合Promise使用

// 获取省份列表
function getProvinceList() {
  return new Promise((resolve, reject) => {
    axios.get('http://example.com/api/provinces')
      .then((response) => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

// 获取城市列表
function getCityList(provinceId) {
  return new Promise((resolve, reject) => {
    axios.get(`http://example.com/api/cities?provinceId=${provinceId}`)
      .then((response) => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

// 获取区县列表
function getCountyList(cityId) {
  return new Promise((resolve, reject) => {
    axios.get(`http://example.com/api/counties?cityId=${cityId}`)
      .then((response) => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

// 加载省份列表
getProvinceList()
  .then((provinceList) => {
    // 将省份列表添加到 select 元素中
    const selectProvince = document.getElementById('province');
    provinceList.forEach((province) => {
      const option = document.createElement('option');
      option.value = province.id;
      option.text = province.name;
      selectProvince.appendChild(option);
    });
  })
  .catch((error) => {
    console.error(error);
  });

// 当省份 select 元素的值改变时，重新加载城市列表
document.getElementById('province').addEventListener('change', (event) => {
  const provinceId = event.target.value;
  // 加载城市列表
  getCityList(provinceId)
    .then((cityList) => {
      // 将城市列表添加到 select 元素中
      const selectCity = document.getElementById('city');
      selectCity.innerHTML = ''; // 清空城市 select 元素的选项
      cityList.forEach((city) => {
        const option = document.createElement('option');
        option.value = city.id;
        option.text = city.name;
        selectCity.appendChild(option);
      });
    })
    .catch((error) => {
      console.error(error);
    });
});

// 当城市 select 元素的值改变时，重新加载区县列表
document.getElementById('city').addEventListener('change', (event) => {
  const cityId = event.target.value;
  // 加载区县列表
  getCountyList(cityId)
    .then((countyList) => {
      // 将区县列表添加到 select 元素中
      const selectCounty = document.getElementById('county');
      selectCounty.innerHTML = ''; // 清空区县 select 元素的选项
      countyList.forEach((county) => {
        const option = document.createElement('option');
        option.value = county.id;
        option.text = county.name;
        selectCounty.appendChild(option);
      });
    })
    .catch((error) => {
      console.error(error);
    });
});