0

我想axios直接从 URL 导入库并使用它。

我不想将它script添加axios为window对象（如下所示）。

索引.html
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./app.js" type="module"></script>
</body>
应用程序.js
console.log(window.axios !== undefined); // true
const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username); // Bret

我想要这样的东西，我可以axios直接从 URL 导入。

索引.html
<body>
    <script src="./app.js" type="module"></script>
</body>
应用程序.js
import axios from "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js";

console.log(window.axios !== undefined);
const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username);

显然这不起作用，因为上述 CDN 提供的 JavaScript 代码并不打算与 ES 模块一起使用。有解决方法吗？

4

3 回答 3

1

您可以使用 Skypack：

import axios from 'https://cdn.skypack.dev/axios';

const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username);

删除 jsDelivr CDN 链接。

于 2021-08-07T15:52:29.867 回答
1

CDN 提供的 JS 文件（如您的：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js）将不提供 ES6 模块导出。下载并搜索“export default”，什么都找不到。

如果您使用 npm，您可以将 axios 添加到您的依赖项中并通过以下方式使用 axios import axios from 'axios'

如果您仍然想在 CDN 中使用 ES 模块，这篇文章可能会有所帮助。

于 2021-08-07T15:40:17.667 回答
1

您不需要在 app.js 中导入 axios，因为它已经在您的 html 中导入，只需删除导入，一切都会正常工作

    async function fetchData() {
      const { data } = await axios.get(
        "https://jsonplaceholder.typicode.com/users/1"
      );
      console.log(data);
    }

fetchData();
于 2021-08-07T15:42:43.520 回答