// 接口地址网站 `https://api.vvhan.com/` 可以去这里面找接口

**本文使用的测试接口十二星座运势 api.vvhan.com/api/horosco… **


<!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" />
    <!-- <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script> -->
    <title>Document</title>
    <style>
      p {
        font-weight: bold;
        font-size: 22px;
        color: orangered;
      }
    </style>
  </head>
  <body>
    <h1>十二星座运势</h1>
    <p></p>
    <script>
      // 接口地址网站   https://api.vvhan.com/  可以去这里面找接口
      // 找到p标签，要替换里面的内容
      const p = document.querySelector("p");
      // 接口地址
      const url = "https://api.vvhan.com/api/joke?type=json";
      // 使用fetch请求接口
      //   fetch是基于Prmise的一个网络请求的库，在浏览器端使用不用像axios一样需要引入
      //   fetch()相当于ajax里面使用的xhr.open()
      // fetch()，返回是一个promise
      fetch(url, {
        // 请求的方式是get
        method: "get",
      })
        .then((response) => {
          //到第一个then返回是一个Promise,要在浏览器端F12才能看到具体内容，我们转成json格式
          return response.json();
        })
        //到第一个then返回是一个Promise,接着使用then
        .then((data) => {
          // 到这一步能得到一个data对象
          //   我们要的是data对象里面的文字内容
        //   然后就在这一步，把得到的对象里面的内容赋值给p标签
          p.innerHTML = data.joke;
        })
        .catch((error) => {
          console.log(error);
        });
    </script>
  </body>
</html>

fetch请求接口并返回数据

// 接口地址网站 https://api.vvhan.com/ 可以去这里面找接口

// 接口地址网站 `https://api.vvhan.com/` 可以去这里面找接口