Javascript 导入axios会导致浏览器中出现异常行为警告
我正在学习一个教程,该教程使用for HTTP请求。我已经设置了一个axios实例,如下所示:Javascript 导入axios会导致浏览器中出现异常行为警告,javascript,reactjs,axios,Javascript,Reactjs,Axios,我正在学习一个教程,该教程使用for HTTP请求。我已经设置了一个axios实例,如下所示: import axios from 'axios'; const axiosInstance = axios.create({ baseUrl: 'https://www.google.com/' }); export default axiosInstance; 我已将其保存在项目的根目录下的一个名为AxiosOrders.js的文件中。当我使用import MyAxios from'
import axios from 'axios';
const axiosInstance = axios.create({
baseUrl: 'https://www.google.com/'
});
export default axiosInstance;
我已将其保存在项目的根目录下的一个名为AxiosOrders.js的文件中。当我使用import MyAxios from'../../AxiosOrders'导入文件时代码>并在控制台日志中不执行其他操作:
C:/DEV/Projects/learning-initiative/burger-builder/node_modules/process/browser.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\DEV\Projects\learning-initiative\burger-builder\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\DEV\Projects\learning-initiative\burger-builder\node_modules\process\browser.js
Used by 2 module(s), i. e.
C:\DEV\Projects\learning-initiative\burger-builder\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\DEV\Projects\learning-initiative\burger-builder\node_modules\react-error-overlay\lib\index.js
* C:\DEV\Projects\learning-initiative\burger-builder\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\dev\Projects\learning-initiative\burger-builder\node_modules\process\browser.js
Used by 1 module(s), i. e.
C:\DEV\Projects\learning-initiative\burger-builder\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\dev\Projects\learning-initiative\burger-builder\node_modules\axios\lib\defaults.js
当我使用导入的对象时,它不会从我创建的实例中获取baseUrl
MyAxios.post('/orders.json', order)
.then(response => console.log(response))
.catch(error => console.log(error));
实际向http://localhost:3000/orders.json
。当我放置调试器并尝试通过键入MyAxios
将对象打印到控制台时,它告诉我uncaughtreferenceerror:MyAxios未定义
这是套管警告所指的还是我遗漏了什么
请求的My package.json:
{
"name": "burger-builder",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
看起来这两个模块实际上是同一个模块:node\u modules\process\browser.js
无论如何,它们的全名是C:\DEV\…
和C:\DEV\…
;可能这就是警告的原因;删除node_modules
目录和package lock.json
文件并再次安装依赖项,应该可以解决警告问题
在控制台中键入MyAxios
会导致ReferenceError
,因为它是在包中定义的,而不是窗口
属性
曾经说过我认为你主要问题的根源(调用http://localhost:3000/orders.json
)在其他地方
希望这能有所帮助。您可以尝试以下方法来解决您的问题:
首先,删除您的node\u modules
文件夹。关闭所有终端(或windows cmd),重新打开终端并正确导航到项目路径确保使用正确的文件夹名称大小写。例如:如果你的文件夹名是DEV
不要做cd-DEV
。执行cd-DEV
。然后进行npm安装。看到和
在您的项目中,查看您是否正在从“React”导入任何React代码>而不是从“React”导入React代码>
导出和导入axios的方式没有问题。如果您的路径问题得到解决,则当您执行MyAxios时,将获取正确的axios实例和正确的url。post
请说明您是如何导入axios实例的。还有您的package.json文件。可能是您安装了不同版本的同一个库。是否正在导出实例?@Piyush我已添加了my package.json。还有,Ludwiguer,是的,很抱歉我在上面的格式中漏掉了。你能分享你的目录结构吗?如果答案没有帮助,请共享您的github repo链接和/或共享其他专家在问题评论部分提到的更多信息。删除node_模块
确实修复了外壳警告,并且您也正确地认为我的主要问题的根源在其他地方。原来它应该是baseURL
,而不是baseURL
。