使用axios请求接口的完整步骤<script src="https://unpkg.com/axios/dist/ax

在线接口网址 https://www.alapi.cn/，注册以后会有自己的token.

本文使用的接口 const url = "https://v2.alapi.cn/api/qinghua";

axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中第三方 Ajax 库

axios文档地址: http://www.axios-js.com/zh-cn/docs/可以使用 script 标签引入并使用

使用cdn <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

用浏览器打开这个cdn已经重定向了，所以直接使用重定向以后的

<script src="https://unpkg.com/axios@1.1.3/dist/axios.min.js"></script>

axios语法axios.get().then().catch

完整代码如下

<!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>

最后open wtih liver server就可以看到请求的结果