axios js请求后端的使用直接使用

最新推荐文章于 2024-08-14 15:45:18 发布

Ai君臣

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量347

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/liuchenbaidu/article/details/140469048

版权

<!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>Document</title>

    <!-- 引入axios 使用cdn -->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://unpkg.com/axios@1.1.3/dist/axios.min.js"></script>

    <!-- <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script> -->
  </head>
  <body>
    <h1>每天一句土味情话</h1>
    <p>啊啊啊啊啊啊啊啊</p>
  </body>
  <script>
    const p = document.querySelector("p");
    const url = "https://v2.alapi.cn/api/qinghua";
    axios
      // 发送请求
      .get(url, {
        params: {
          // 需要2个参数，一个是token,一个是返回的数据类型
          //   在使用在线接口网站的时候，注册以后会有自己的token
          //线接口网站 https://www.alapi.cn/
          token: "Od57Mf5oIUHyW8Eu",
          //   返回的数据类型
          format: "json",
        },
      })
      //   因为axios是基于promise,所以和prmise一样的使使用.then().catch()
      .then(function (response) {
      //可以用浏览器打开看看这个response是什么console.log(response)
        // 用浏览器打开console.log(response)是一个对象，我们要的是在这个对象里面的一句话
        // 再把对象里面这一句话添加到P节点
        p.innerHTML = response.data.data.content;
      })
      //   如果有错误，就打印错误
      .catch(function (error) {
        console.log(error);
      });
  </script>
</html>