Axios环境设定
套件连结
- CDN
- 套件指令安装Using npm:
$ npm install axiosUsing bower:
$ bower install axiosUsing yarn:
$ yarn add axiosUsing 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>