javascript - vue项目中的$http报错是什么问题？

Question

let res = await $http.get("api.cart")
在$http上报了 $http is undefined的错误不知道怎么回事

看了网上说好多是没有配置jquery？配置了也还是没有搞好

Answer 1

你应该是有一个单独的文件，来将axios封装处理，然后文件导出$http，在需要使用的地方引入。

类似于这种文件，导出一个service https://github.com/yangzongzhuan/RuoYi-Vue3/blob/master/src/utils/request.js

Answer 2

你这个 $http 是需要有个定义的，比如说 import 进来的，或者闭包变量什么的。

然后 $http 这个写法一般还是 vue 中见得比较多，不过一般是 this.$http，这个写法需要再入口文件先绑定

Answer 3

在 Vue 项目中遇到 $http is undefined 的错误，通常意味着 $http 这个变量在当前的作用域内没有被定义或者没有正确导入。这个错误和 jQuery 没有直接关系，因为 $http 并不是 jQuery 的一部分。$http 通常与某些 Vue 插件或者项目中的自定义服务相关。

要解决这个问题，你可以按照以下步骤进行排查：

1. 检查 $http 的定义：
   确认你的项目中是否定义了 $http。它可能是作为 Vue 的原型方法、Vuex action、或者一个单独的服务模块定义的。

2. 确认导入：
   如果 $http 是作为模块或插件提供的，确保你已经正确导入了它。例如，如果 $http 是 axios 的一个别名或封装，你需要确保已经导入了 axios，并且可能还需要在 Vue 的原型上设置它：

   import axios from 'axios';Vue.prototype.$http = axios;

3. 检查作用域：
   确认你在使用 $http 的地方，它应该是可访问的。如果你在一个组件内部使用它，确保 $http 是在组件的 methods、computed、created、mounted 等生命周期钩子中可访问的。
4. 检查配置：
   如果你确实配置了 jQuery 和某个与 jQuery 相关的插件（比如 jQuery 的 AJAX 方法），那么请检查你是否正确地将这些插件和 Vue 集成在一起。然而，现代的 Vue 项目中很少直接使用 jQuery，因此这种可能性较小。
5. 查看文档或示例：
   如果 $http 是第三方库或插件提供的，查看它的文档或示例代码来确认如何正确地使用它。
6. 使用其他 HTTP 库：
   如果 $http 是项目遗留代码或你无法确定其来源，考虑使用更流行和文档更完善的 HTTP 客户端库，比如 axios 或 fetch API。
7. 检查控制台和网络请求：
   在浏览器的开发者工具中查看控制台输出和网络请求，看看是否有其他错误信息或提示，这可能会帮助你找到问题的根源。

如果你已经按照上述步骤进行了排查，但问题仍然存在，请提供更多的代码上下文和错误信息，以便进一步分析。例如，提供你如何设置 $http 的代码片段，以及你在哪个文件或组件中尝试使用它。这将有助于更精确地定位问题。