Ajax-async函数和await

async函数和await#

async函数是使用 async 关键字声明的函数。async函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。async和await关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise

概念：在async函数内，使用await关键字取代then函数， 等待 获取Promise对象 成功状态的结果值

async+await解决回调函数地狱#

掌握async和await语法，解决回调函数地狱

省份： 城市： 地区：

// 1.定义一async修饰函数
async function getData() {
    const pObj = await axios({
        url: 'http://hmajax.itheima.net/api/province'
    })
    const pname = pObj.data.list[0]
    const cObj = await axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: {
            pname
        }
    })
    const cname = cObj.data.list[0]
    const areaObj = await axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
            pname,
            cname
        }
    })
    const areaname = areaObj.data.list[0]
    document.querySelector('.province').innerHTML = pname
    document.querySelector('.city').innerHTML = cname
    document.querySelector('.area').innerHTML = areaname
}
getData()

async函数和await捕获错误#

使用 try...catch 语句标记要尝试的语句块，并指定一个出现异常时抛出的响应

// 使用try包裹可能出错的代码
try{
    //可能出错的代码
}catch(error){
    // catch捕获错误
}