Ajax-Promise链式调用

Promise链式调用#

概念：依靠 then() 方法会返回一个 新生成的Promise对象 特性，继续串联下一环任务，直到结束

细节： then() 回调函数中的 返回值 ，会影响新生成的Promise对象 最终状态和结果

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

链式调用-回调函数地狱#

目标：使用Promise链式调用，解决回调函数地狱问题

做法：每个Promise对象中管理一个异步任务，用then返回Promise对象，串联起来

省份： 城市： 地区：

let pname = '';
// 1.获取省份Promise对象
axios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(res => {
    console.log(res);
    pname = res.data.list[0]
    document.querySelector('.province').innerHTML = pname;
    // 2.获取城市Promise对象
    return axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: {
            pname
        }
    })
}).then(res => {
    console.log(res);
    const cname = res.data.list[0]
    document.querySelector('.city').innerHTML = cname;
    // 3.获取地区Promise对象
    return axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
            pname,
            cname
        }
    })
}).then(res => {
    console.log(res);
    const areaname = res.data.list[0]
    document.querySelector('.area').innerHTML = areaname;
})