2024 IT鐵人賽 Day27 -Axios串API

javascript javascript 30

will93068 2024-10-24 20:19:52 ‧ 331 瀏覽

分享至

Axios環境設定

套件連結

CDN
套件指令安裝Using npm:

$ npm install axios
Using bower:

$ bower install axios
Using yarn:

$ yarn add axios
Using pnpm:

$ pnpm add axios

串的API寶可夢 API

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 顯示寶可夢的名稱 -->
    <h1 class="name"></h1>
    <!-- 顯示寶可夢的版本 URL -->
    <h2 class="url"></h2>
    
    <!-- 引入 Axios 函式庫 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
    <script>
      // 在控制台打印 Axios 物件，確認其已正確載入
      console.log(axios);
      
      // 使用 Axios 發送 GET 請求，獲取 Ditto 的資料
      axios.get("https://pokeapi.co/api/v2/pokemon/ditto").then(function (res) {
        // 打印返回的資料
        console.log(res.data);
        
        // 將返回的資料存入變數 ary
        let ary = res.data;
        
        // 打印 game_indices 的第一筆資料
        console.log(ary.game_indices[0]);
        
        // 打印該版本的名稱和 URL
        console.log("name", ary.game_indices[0].version.name);
        console.log("URL", ary.game_indices[0].version.url);
        
        // 選取 HTML 中的元素以顯示名稱和 URL
        const name = document.querySelector(".name");
        const url = document.querySelector(".url");

        // 打印選取的元素，確認其正確
        console.log(name, url);

        // 將名稱和 URL 填入相應的 HTML 元素中
        name.innerHTML = ary.game_indices[0].version.name;
        url.innerHTML = ary.game_indices[0].version.url;
      });
    </script>
  </body>
</html>