如何使 axios 与浏览器中的 ESM 模块一起使用？

索姆·谢哈·慕克吉

所以，我只想axios在浏览器中使用ESM 模块。

索引.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添加到window）。

我认为下面的解决方案（直接从 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);

我知道模块说明符可能是完整的 URL（或相对路径），但在这种情况下它似乎不起作用，为什么？。我收到以下错误。

未捕获的语法错误：请求的模块“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”不提供名为“default”的导出

希瓦姆

您可以使用 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 链接。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。