AngularJS中使用Http Get请求无法获取数据的问题求助

嘿，我来帮你排查这个问题！我整理了几个最常见的原因和对应的解决办法，你可以一步步来检查：

1. 先确认请求路径是否完全正确 #

这是最容易踩坑的点！你得保证$http.get()里的路径和你的项目文件结构完全匹配。

举个例子，如果你的项目结构是这样的：

你的项目文件夹/
├── index.html
├── controller.js
├── database.json

那你的GET请求代码应该写成这样：

$http.get('database.json')
  .then(function(response) {
    // 成功拿到数据后的处理逻辑
    console.log('数据获取成功:', response.data);
  })
  .catch(function(error) {
    // 一定要打印错误详情，方便排查
    console.error('请求失败:', error);
  });

如果你的database.json放在子文件夹（比如data目录）里，那路径就要改成'data/database.json'。别乱用./或者../这类相对路径，除非你非常清楚当前文件的层级关系，直接用项目根目录相对的路径更稳妥。

2. 检查http-server的运行目录是否正确 #

你必须在项目的根文件夹下启动http-server，不然服务器的根目录不对，自然找不到你的database.json文件。

比如你的项目文件夹叫angular-demo，那你要先打开终端，cd到这个文件夹里：

cd angular-demo
http-server

启动后，服务器会给出访问地址（比如http://localhost:8080），你可以直接在浏览器地址栏输入http://localhost:8080/database.json，看看能不能直接打开这个文件。如果打不开，说明要么路径错了，要么服务器启动目录不对。

3. 验证database.json的格式是否合法 #

JSON格式超级严格，多一个逗号、用了单引号代替双引号，都会导致解析失败。你可以把文件内容复制到JSON校验工具（直接搜“JSON validator”就能找到在线工具）里检查，确保没有语法错误。

给你一个正确的JSON示例参考：

{
  "products": [
    {"id": 1, "name": "笔记本电脑"},
    {"id": 2, "name": "无线鼠标"}
  ]
}

4. 确认$http服务是否正确注入到控制器里 #

在AngularJS中，必须显式注入$http服务，不然控制器会找不到这个服务，导致请求失败。你的控制器代码应该是这样的：

angular.module('myApp', [])
  .controller('DataController', ['$http', function($http) {
    var vm = this;
    // 发起GET请求
    $http.get('database.json')
      .then(function(res) {
        vm.data = res.data;
      })
      .catch(function(err) {
        console.log('请求出错啦:', err);
      });
  }]);

注意看，我们在控制器的依赖数组里加了'$http'，并且在函数参数里也传入了$http，这一步绝对不能少。

5. 仔细看控制台的错误提示 #

你提到控制台有报错，一定要盯着错误信息看：

• 如果是404 Not Found：说明文件找不到，回到前面的1、2步排查路径和服务器目录。
• 如果是500 Internal Server Error：大概率是JSON格式有问题，去检查第3步。
• 如果是跨域相关的错误（比如No 'Access-Control-Allow-Origin' header）：正常情况下，同一个http-server下的文件不会跨域，这时候你要检查是不是请求路径写了外部地址，或者服务器启动目录不对。

如果还是解决不了，你可以把控制台的具体错误信息、你的项目结构截图，还有controller里的完整代码贴出来，这样能更精准地定位问题！

内容的提问来源于stack exchange，提问作者Heena