回调地狱：在回调函数中调用回调函数 缺点：可维护性差，可读性差引入axios
省份
<select>
<option value="" class="province"></option>
</select> 城市
<select>
<option value="" class="city"></option>
</select> 地区
<select>
<option value="" class="area"></option>
</select>
<script>
//例子获取省份，城市，地区
axios({
url: 'https://hmajax.itheima.net/api/province'
})
.then((res) => {
console.log(res.data.list[0]); //
const pnames = res.data.list[0];
// innerText给文本添加内容
document.querySelector('.province').innerText = pnames;
//城市 get方法用params传参,post方法用data传参
axios({
url: 'https://hmajax.itheima.net/api/city',
params: {
pname: pnames
}
}).then((res1) => {
console.log(res1.data.list);
const cname = res1.data.list[0];
document.querySelector('.city').innerText = cname;
// 地区
axios({
url: 'https://hmajax.itheima.net/api/area',
params: {
pname: pnames,
cname
}
}).then((res2) => {
console.log(res2)
document.querySelector('.area').innerText = res2.data.list[0];
})
})
})
</script>
显示的页面省份
后台打印
