AngularJS 从 WebApi 获取数据 - 未显示错误答案

【问题标题】：AngularJS fetch the data from WebApi - errors not showingAngularJS 从 WebApi 获取数据 - 未显示错误
【发布时间】：2017-07-26 10:50:24
【问题描述】：

我在所有使用 angularJS 从 WebApi 获取数据的示例程序中都遇到了类似的问题。我认为与我的代码无关，但是我可能忽略了一些设置，请帮我检查一下：这是我的网络 API：网址：http://localhost:1883/api/Subcriber 并返回数据：

HTML 正文：

<div id="tblSubs" ng-controller="APIController">
    <table>
        <tr>
            <th>ID</th>
            <th>Email ID ( Double click to update)</th>
            <th>Subscribed Date</th>
            <th></th>
        </tr>
        <tbody data-ng-repeat="sub in subscriber">
            <tr>
                <td>{{sub.SubscriberID}}</td>
                <td ng-blur="updSubscriber(sub,$event)" ng-dblclick="makeEditable($event)">{{sub.MailID}}</td>
                <td>{{sub.SubscribedDate}}</td>
                <td>
                    <input type="button" id="Delete" value="Delete" data-ng-click="dltSubscriber(sub.SubscriberID)" />
                </td>
            </tr>
        </tbody>
    </table>
    <div class="form-group">
        <label for="email">Sbscribe here</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" [required="string" ] data-ng-model="mailid" />
    </div>
    <button type="button" class="btn btn-default" data-ng-click="saveSubs();">Submit</button>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/ApiScripers/Module.js"></script>
<script src="Scripts/ApiScripers/Service.js"></script>
<script src="Scripts/ApiScripers/controller.js"></script>

AngularJS 模块：

    var app;
(function () {
app=angular.module('APIModule', []);
})();

AngularJS 服务：

app.service("APIService", function ($http) {
this.getSubs = function () {
    var url = 'api/Subscriber';
    return $http.get(url).then(function (response) {
        return response.data;
    });
}

AngularJS 控制器：

        app.controller('APIController', function ($scope, APIService) {
getAll();
function getAll() {
    var servCall = APIService.getSubs();
    servCall.then(function (d) {
        $scope.subscriber = d.data;
    }, function (error) {
        $log.error('Oops! Something went wrong while fetching the data.')
    })
}   
})

运行后，浏览器调试窗口没有错误信息。太奇怪了，要不要把我的webapi发布到IIS再调用呢？

更新： 索引.cshtml：

@{
    ViewBag.Title = "Welcome";
}
<style>
    table, tr, td, th {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
    }
</style>

<h2>Welcome to Sibeesh Passion's Email List</h2>
<body data-ng-app="APIModule">
    <div id="tblSubs" ng-controller="APIController">
        <table>
            <tr>
                <th>ID</th>
                <th>Email ID ( Double click to update)</th>
                <th>Subscribed Date</th>
                <th></th>
            </tr>
            <tbody data-ng-repeat="sub in subscriber">
                <tr>
                    <td>{{sub.SubscriberID}}</td>
                    <td ng-blur="updSubscriber(sub,$event)" ng-dblclick="makeEditable($event)">{{sub.MailID}}</td>
                    <td>{{sub.SubscribedDate}}</td>
                    <td>
                        <input type="button" id="Delete" value="Delete" data-ng-click="dltSubscriber(sub.SubscriberID)" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="form-group">
            <label for="email">Sbscribe here</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" [required="string" ] data-ng-model="mailid" />
        </div>
        <button type="button" class="btn btn-default" data-ng-click="saveSubs();">Submit</button>
    </div>
</body>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/APIScripts/Module.js"></script>
<script src="~/Scripts/APIScripts/Service.js"></script>
<script src="~/Scripts/APIScripts/Controller.js"></script>

_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Sibeesh Passion</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

.cshtml 可以从 webapi 获取数据，但我只是将 html 代码复制到无法访问数据的 .html 文件中。希望有人可以帮助它。代码没有问题，可能是我忽略了一些包含。

【问题讨论】：

我把.cshtml文件的源代码复制到了html文件太奇怪了。而问题又出现了。这是我的项目：
问题： 1. 网络标签中是否有可见的网络呼叫，是否有响应？ 2. 通过在服务中放置一个console.log，您必须确定服务是否正在被调用并正确返回数据。最后： 3. 控制器中变量 d 中的值是否可用。这缩小了问题的范围。如果您还有精力，请在 jsfiddle 上重现问题。
也发布您的 webapi 代码
我将分享我的项目，这是我的项目：1drv.ms/f/s!AiYjxW6ElFsyvkUdoh3T1o3CiW5g
HtmlPage1.html 是运行问题，但代码和 index.cshtml 文件一样，这让我很惊讶。这个项目可以运行没有任何问题，我只是修改了数据源，我从这里得到它：gallery.technet.microsoft.com/Web-API-With-Angular-JS-8f4ac03d

标签： javascript angularjs asp.net-web-api angularjs-http

【解决方案1】：

一定要抛出错误才能在控制台窗口中看到：

function getAll() {
    var servCall = APIService.getSubs();
    servCall.then(function (d) {
        $scope.subscriber = d.data;
    }, function (error) {
        $log.error('Oops! Something went wrong while fetching the data.')
        //THROW error
        throw error;
    })
}

当 Promise .then 方法拒绝处理程序省略 throw 语句时，处理函数返回值 undefined。这会将被拒绝的承诺转换为已履行的承诺。

$q:

由于e13eea，从 Promise 的 onFulfilled 或 onRejection 处理程序抛出的错误被视为与常规拒绝完全相同。以前，它也会被传递给 $exceptionHandler() （除了以错误为理由拒绝承诺）。

-- AngularJS Developer Guide - Migrating from V1.5 to V1.6。

【讨论】：

我认为这与我的代码无关，我只是从 cshtml 文件中复制了 html 代码。什么都没有改变。所以我怀疑当我运行 angularjs 时是否需要其他 js 库，如 jquery 或其他。我已经导入了 JQuery 库。这让我很了不起。非常感谢。

【解决方案2】：

它正在工作，我需要导入一些必要的库，例如 jquery 和 bootstrap.js。但是我发现了另一个问题：一开始我觉得我的代码不行，可能是我错了，webapi取数据的速度太慢了，所以我看不到了。仅仅2秒后，数据全部显示成功。所以 .cshtml 文件的速度比 .html 文件快，是什么原因导致了这个问题。有没有人和我一样的问题。

【讨论】：