Uncaught (in promise) ReferenceError: axios is not defined答案

【问题标题】：Uncaught (in promise) ReferenceError: axios is not definedUncaught (in promise) ReferenceError: axios is not defined
【发布时间】：2021-12-12 22:15:28
【问题描述】：

当我尝试加载我的 html 页面时出现此错误：

Uncaught (in promise) ReferenceError: axios is not defined 在获取 (index.js:7)

当我将其导入为 import axios from 'axios'; 时，我得到：

未捕获的语法错误：无法在模块外使用 import 语句

因此，无论哪种方式，它都无法正常工作。我也用过npm install axios，并在html文件中提到了来源：

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.23.0/axios.js"></script>

或

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我只是没有注意到我可能做错了什么。以下是脚本示例：

     const apiUrl = 'http://localhost:8000/api/';
    
    async function get(url) {
      return (await axios(url)).data;
    }
    
    async function loadTable() {
      let data = await get(apiUrl + 'getList');
      let tableDiv = document.getElementById('tableData');
   // and so on

我的 api 运行正常，唯一的问题是这个 axio 参考。节点脚本在另一个 .js 文件中运行良好，Postman 也可以毫无问题地识别它。相同的端口，相同的 URL。

【问题讨论】：

你在模块中导入了 Axios 吗？

标签： javascript html node.js api axios

【解决方案1】：

如果这是一个 HTML 页面，就像您在浏览器中打开的页面一样，npm 将无法为您将 Axios 添加到该页面中。您可以将 Node.js 代码视为服务器端，将您的浏览器视为客户端（请注意，并非总是如此，但在这里）。

另请注意，import 用于 Node.js 代码，如果没有额外的框架（我假设您没有在这里使用），它将无法在 HTML 代码中工作。

您的script 标签是正确的，但它们可能没有在正确的位置添加到您的HTML 文件中。您可以使用这些配置中的任何一种，它应该可以工作：

脚本正在在页面元素创建之前导入：

<head>
    ...
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    ...
</head>
<body>
    ...
    <script src="yourCustomCode"></script>
<body>

脚本正在在页面元素创建后导入：

<head>
    ...
</head>
<body>
    ...
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="yourCustomCode"></script>
<body>

无论哪种方式，只要确保 Axios 包高于您要使用 Axios 运行的代码。

【讨论】：

是的，正如我提到的，我在另一个 script.js 中有节点，api 运行良好，邮递员可以毫无问题地识别它。相同的端口，相同的链接。
天哪，我没有将 Axios 包放在代码上方。非常感谢！过去 2 小时我一直在苦苦挣扎。
@thhhhhhhh 很高兴你知道了。肯定比我还早！