axios 的请求方式

1.绑定点击事件 get请求无参数

</head>

  <body>
    <h2>get请求+参数换地</h2>
    <button class="btn1">测试</button>
    <button class="btn2">测试有参数</button>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <script src="./lib/axios.js"></script>
    <script>
      // 1.绑定点击事件 get请求无参数
      const btn = document.querySelector(".btn1");
      btn.addEventListener("click", function () {
        // 请求方式1
        // axios({
        //   method: "get",
        //   url: "http://ajax-api.itheima.net/api/news",
        // })
        // 请求方2 axios.get("http://ajax-api.itheima.net/api/news")
        axios
          .get("http://ajax-api.itheima.net/api/news")
          .then(function (res) {
            console.log("返回接口成功时的结果");
          })
          .catch(function (err) {
            console.log("返回接口失败时的结果");
            console.log();
          });
      });
     </script>
  </body>

// 2.绑定点击事件 get请求有参数

</head>

  <body>
    <h2>get请求+参数换地</h2>
    <button class="btn1">测试</button>
    <button class="btn2">测试有参数</button>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <script src="./lib/axios.js"></script>
    <script>
   2.绑定点击事件 get请求有参数
      const btn2 = document.querySelector(".btn2");
      btn2.addEventListener("click", function () {
        // 请求携带参数的方法1URL地址后面直接拼接？属性名=属性值
        // axios.get("http://ajax-api.itheima.net/api/robot?spoken=你是谁")
        //参数写在“”号里面 多个参数用&隔开
      如axios.get("http://ajax-api.itheima.net/api/robot?属性名=属性值&属性名1=属性名2")
        // 请求携带参数的方法2 
       如axios .get("http://ajax-api.itheima.net/api/robot",
        {params: { spoken（属性名）: "你喜欢谁？（属性值）", },}) 
       多个参数，号隔开写在params:{写这}里面
        axios
          .get("http://ajax-api.itheima.net/api/robot", {
            params: {
              spoken: "你喜欢谁？",
            },
          })
          .then(function (res) {
            console.log(res);
          })
          .catch(function (err) {
            console.log("出错");
          });
      });
    </script>
  </body>