$http.get 404 使用 .then 的 JSON 文件答案

【问题标题】：$http.get 404 of JSON file using .then$http.get 404 使用 .then 的 JSON 文件
【发布时间】：2016-11-30 09:41:43
【问题描述】：

我在 YouTube 上浏览了一组 Angular 视频，发现 .success 已被弃用，并改用 .then。使用 .json 文件和 .txt 文件时出现 404 错误。我尝试使用 .txt，因为人们提到浏览器不允许本地文件访问其他本地文件。

这是我目前的 $http 请求

$http.get('data/ninjas.txt').then(function(response) {
       // Success!!!
        $scope.ninjas = response.data;
    });

这是我的 .json 文件，通过 JSONLint 有效

[{
    "name": "Yoshi",
    "belt": "green",
    "rate": 50,
    "available": true,
    "thumb": "content/img/yoshi.png"
}, {
    "name": "Crystal",
    "belt": "yellow",
    "rate": 30,
    "available": true,
    "thumb": "content/img/crystal.png"
}, {
    "name": "Ryu",
    "belt": "orange",
    "rate": 10,
    "available": true,
    "thumb": "content/img/ryu.png"
}, {
    "name": "Shaun",
    "belt": "black",
    "rate": 1000,
    "available": true,
    "thumb": "content/img/shaun.png"
}]

我尝试使用 httpster 和实时预览中内置的括号进行测试。我收到 404 错误，但该文件确实存在，如您在图片中看到的那样

如果有帮助，这是我的整个 app.js 文件

var myNinjaApp = angular.module('myNinjaApp', ['ngRoute']);

myNinjaApp.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/home', {
        templateUrl: 'views/home.html'
    })
        .when('/directory', {
        templateUrl: 'views/directory.html',
        controller: 'NinjaController'
    })
        .otherwise({
        redirectTo: '/home'
    });
}]);

myNinjaApp.controller('NinjaController', ['$scope', '$http', function($scope, $http){

    $scope.removeNinja = function(ninja){
        var removedNinja = $scope.ninjas.indexOf(ninja);
        $scope.ninjas.splice(removedNinja, 1)
    };

    $scope.addNinja = function(){
        $scope.ninjas.push({
            name: $scope.newninja.name,
            belt: $scope.newninja.belt,
            rate: parseInt($scope.newninja.rate),
            available: true
        }); 

        $scope.newninja.name = "";
        $scope.newninja.belt = "";
        $scope.newninja.rate = "";
    };

    $http.get('data/ninjas.txt').then(function(response) {
       // Success!!!
        $scope.ninjas = response.data;
    });

}]);

【问题讨论】：

为什么ninjas.txt文件不是ninjas.json文件？
@JoeriShoeby 我已经尝试过 404 和 404。我在另一个问题上读到，当运行本地浏览器/本地主机时，解释 JSON 时会出现问题，但由于某种原因使文件成为 .txt 或 .html 文件有效.我有一个 .json 文件并且也尝试过。都是 404。
你的路径是相对于 index.html 还是 app.js 文件？尝试使用'app/data/ninjas.json'
@JoeriShoeby 将路径更改为您建议的工作！这条路行得通有什么原因吗？我使用 .json 和 .txt 文件进行了尝试，并且都有效。谢谢！只是好奇为什么它必须是相对于 index.html 而不是相对于 app.js 的路径
因为浏览器是根据当前页面的url而不是脚本源发出相对请求

标签： angularjs json http get

【解决方案1】：

为了使答案完整，

您的应用程序的根是“index.html”，并且因为 Angular 在“index.html”中运行，所以您在文件中加载的所有文件都与您的“index.html”相关。

在您的路由配置中可以看到一个示例，您的模板从“views/*”开始加载，这是您的“index.html”的子文件夹

【讨论】：

感谢您发布答案！
在使用 htm5Mode 路由时并不完全准确。相对于 url 路径。 views 也是索引的兄弟
你绝对正确，但你可以看到他没有使用它。

【解决方案2】：

myNinjaApp.controller('NinjaController', ['$scope', '$http', function ($scope, $http) {

    $http({
        url: "data/ninjas.json",
        method: "GET"
    }).then(function (resp) {
        $scope.ninjas = resp;
    }, function (resp) {
       // bla bla bal
    });

    $scope.removeNinja = function (ninja) {
        var removeNinja = $scope.ninjas.indexOf(ninja);
        $scope.ninjas.splice(removeNinja, 1);
    }

    $scope.addNinja = function () {
        $scope.ninjas.push({
            name: $scope.newninja.name,
            belt: $scope.newninja.belt,
            rate: parseInt($scope.newninja.rate),
            available: true
        });
        $scope.newninja.name = "";
        $scope.newninja.belt = "";
        $scope.newninja.rate = "";
    };

    $scope.removeAll = function () {
        $scope.ninjas = [];
    };

    $scope.sort = function (keyname) {
        $scope.sortKey = keyname; 
        $scope.reverse = !$scope.reverse;
    }

}]);

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案3】：

至于所有努力获得网络忍者数组的人，上面的代码现在在数据而不是 JSON 文件本身下获得整个 HTTP 响应，您需要获取请求的数据属性，如下所示：

$http.get('app/Data/ninja.json').then(function(data) {
  $scope.ninjas = data.data;
}, function() {

});

【讨论】：