ajax：使用async函数和await关键字时的错误捕获

本文链接：https://blog.csdn.net/panghuangang/article/details/140430440

使用async函数和await关键字时如何捕获错误:

使用 try … catch： try … catch 语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。
如果try里某行代码报错，try块中剩余的代码不会执行了

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async函数和await_错误捕获</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：async和await_错误捕获
    */
    async function getData() {
      // try 包裹可能产生错误的代码
      try {
        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 aObj = await axios({ url: 'http://hmajax.itheima.net/api/area1', params: { pname, cname } })
        const areaName = aObj.data.list[0]

        document.querySelector('.province').innerHTML = pname
        document.querySelector('.city').innerHTML = cname
        document.querySelector('.area').innerHTML = areaName
      } catch (error) {
        // 调用catch块，处理错误信息
        // 注意：对于错误信息，建议使用console.dir打印，而不是console.log
        console.dir(error)
      }

    }

    getData()
  </script>
</body>

</html>