javascript - 了解 Angular Promise 和 API 调用——从 API 创建用户仪表板-6ren

javascript - 了解 Angular Promise 和 API 调用——从 API 创建用户仪表板

转载作者：太空宇宙更新时间：2023-11-04 15:42:50

我正在尝试创建一个简单的仪表板来模仿显示的功能 here 。我想坚持一个 Angular 结构，但我已经成功地将自己迷失了。总的来说，我对 Angular 还很陌生。

我正在根据 Github API 中的数据创建一个简单的仪表板。我想引用以下数据源(其中 user 是搜索栏中的值，repo 是从存储库列表中单击的值 - 请参阅中的链接示例第一段):

"https://api.github.com/users/" + user                          ----> returns general user info
"https://api.github.com/users/" + user + "/repos"               ----> used for repo list
"https://api.github.com/repos/" + user + "/" + repo + "/events" ----> list of events per repo

本质上，该应用程序应该按以下方式工作:

用户在搜索栏中输入 Github 用户名。
调用API返回用户信息和仓库列表 (我列出的前两个网址)

到目前为止，我已经完成了这项工作。

然后，根据返回的下拉列表中第一个选定的存储库或选定的值，将调用第三个 URL 以返回更多数据。

据我所知，我需要合并 Angular promise ，因为我的第三个 Get 请求未被识别。

有人可以帮助我重构我的 app.js 代码以确保:- 我在页面渲染上设置了一个“存储库”(即第一个列出的存储库将是默认选择的)- 用户与存储库列表交互后再次调用事件 API

我试图遵循所解释的内容here但我对如何合并用户名和选定的存储库有点困惑。如果有人可以指导我如何在代码中添加这些参数(由用户指定)，我将非常感激!

这是我当前的代码，供引用:

app.js

angular.module('myApp', ['ui.router'])
    .controller('DashboardCtrl', function($scope, $state, $http){
        // Set search model to 'mbostock' and the fetch function to contact the
        // remote API and ensure the view is initialized. Load results when the search box changes.
        $scope.$watch('search', function() {
            initialFetch();
        });
        $scope.search = "mbostock";


    // Make calls to the API for Users and Repo List
    function initialFetch(){
        $http.get("https://api.github.com/users/" + $scope.search)
            .then(function(response){ $scope.userinfo = response.data; });

        $http.get("https://api.github.com/users/" + $scope.search + "/repos")
            .then(
                function(response){ $scope.repolist = response.data;

                // Create call for events listing based on repo choice
                var repo = "";

                // console.log(document.getElementById("repo1").value);

                $(function() {
                    //For showing default url
                    MakeUrl();
                    // On repository selection, call events
                    $('#repo-select').on('change', function () {
                        if ($(this).val() == 0) {
                            repo = document.getElementById("repo1").value;
                        } else {
                            repo = $(this).val();
                        }
                        MakeUrl();
                        return false;
                    });

                });

                function MakeUrl() {
                    var finalUrl = "https://api.github.com/repos/" + $scope.search + "/" + repo + "/events";
                    console.log(finalUrl);
                    $http.get(finalUrl)
                        .then(function (response) { $scope.eventinfo = response.data; });
                }


                });
    }


    // Function select which ensures that the entire
    // text is selected when the user clicks in the text input.
    $scope.select = function(){
        this.setSelectionRange(0, this.value.length);
    }
})

index.html

<body>
<div class="container-fluid outerdiv" ng-app="myApp" ng-controller="DashboardCtrl">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand"><b>Github User Information</b> <span class="span-style"></span></a>
            </div>

            <div class="input-group search-bar">
                <input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" onclick="select()" class="form-control" placeholder="Enter Github user login" autofocus />
                <span class="input-group-addon bar-style"><i class="glyphicon glyphicon-search"></i></span>
            </div>
        </div>
    </nav>

    <noscript>
        <div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
    </noscript>

    <div class="animated zoomInRight">


        <div id="user-bio" class="col-sm-4 col-md-4">
            <div>
                <div class="avatar">
                    <img src="{{ userinfo.avatar_url }}" class="thumbnail animated flip movie-poster">
                </div>

                <span class="span-outer">
                    <a href="{{userinfo.html_url}}" target="_blank">{{ userinfo.login }}</a>
                </span><br>{{ userinfo.name }}

                <p><strong>Joined:</strong><br> {{ userinfo.created_at }}</p>
                <p><strong>Last Updated:</strong><br> {{ userinfo.updated_at }}</p>

                <p>{{ userinfo.bio }}</p>

                <p class="outer-p">
                <div class="inner-p">
                    <span class="label label-primary">Public Repos :</span> {{ userinfo.public_repos }}
                </div>
                <div class="inner-p">
                    <span class="label label-primary">Followers :</span> {{ userinfo.followers }}
                </div>
                <div class="inner-p">
                    <span class="label label-primary">Following :</span> {{ userinfo.following }}
                </div>
                </p>

            </div>

            <div ng-if="userinfo.message==='Not Found'">
                No results found.
            </div>
        </div>

        <div class="col-sm-8 col-md-8">
            <h5><strong>Repositories:</strong></h5>
            <select id="repo-select">
                <option ng-repeat="repo in repolist" id="repo{{ $index + 1 }}" value="{{ repo.name }}" onchange="MakeUrl();">{{ repo.name }}</option>
            </select>

            <h5><strong>Events:</strong></h5>
            <ul class="event-results" id="event-select" style="height:400px; overflow-y:auto;">
                <li ng-repeat="event in eventinfo">
                    <a id="{{ $index + 1 }}" value="{{ event.type }}">{{ event.type }}
                    </a>, {{ event.created_at }} <!--ng-click="update(movie)"-->
                </li>
            </ul>
        </div>

    </div>
</div>

</body>

编辑这是我看到的错误 - 再次，它们似乎表明我需要实现 promise 。话又说回来，我不确定为什么我不能指定默认选择的存储库。

可能未处理的拒绝:{"data":{"message":"Not Found","documentation_url":"https://developer.github.com/v3 "},"status":404,"config":{"method":"GET ","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"回调","url":"https://api.github.com/repos/mbostock//events ","headers":{"Accept":"application/json, text/plain,/"}},"statusText":"未找到"}

更新和编辑通过 @mikwat 的建议，我尝试使用 ng-model 绑定(bind) repo 变量。

我的新 app.js 文件如下所示:

angular.module('myApp', ['ui.router'])
    .controller('DashboardCtrl', function($scope, $state, $http, DataService){
        // Set search model to 'mbostock' and the fetch function to contact the
        // remote API and ensure the view is initialized. Load results when the search box changes.
        $scope.$watch('search', function() {
            initialFetch();
                // .then(MakeUrl);
        });

        var user = $scope.search;
        $scope.search = "mbostock";
        $scope.repo = "array-source";


        // Make calls to the API for Users and Repo List
        function initialFetch(){
            $http.get("https://api.github.com/users/" + $scope.search)
                .then(function(response){ $scope.userinfo = response.data; });

            $http.get("https://api.github.com/users/" + $scope.search + "/repos")
                .then(
                    function(response){ $scope.repolist = response.data; },
                    $http.get("https://api.github.com/repos/" + $scope.search + "/" + $scope.repo + "/events")
                        .then(function (response) { $scope.eventinfo = response.data; })
                );
        }


        // Function select which ensures that the entire
        // text is selected when the user clicks in the text input.
        $scope.select = function(){
            this.setSelectionRange(0, this.value.length);
        }
    });

虽然这是获取要渲染的数据，但我无法弄清楚如何动态分配第一个存储库列表值作为我的默认值(我尝试了 document.getElementById("repo1").value 但我得到“未定义”)并且该函数不会在下拉列表更改时再次调用 API。

更新 5/5/2017 -- 个人解决方案非常感谢@mikwat 提供的所有帮助。我最终使用了与他下面稍有不同的解决方案，但两者都有效。

angular.module('myApp', [])
.controller('DashboardCtrl', function($scope, $http){
    // Set search model to 'mbostock' and the fetch function to contact the
    // remote API and ensure the view is initialized. Load results when the search box changes.
    $scope.$watch('search', function() {
        initialFetch();
        // .then(MakeUrl);
    });

    // NOTE: watch for changes to repo
    $scope.$watch('repo', function() {
        $http.get("https://api.github.com/repos/" + $scope.search + "/" + $scope.repo + "/events")
            .then(function (response) {
                $scope.eventinfo = response.data;
            });

    });

    var user = $scope.search;
    $scope.search = "mbostock";

    // Make calls to the API for Users and Repo List
    function initialFetch(){
        $http.get("https://api.github.com/events")
            .then(function(response){ $scope.publicevents = response.data; console.log(response.data);})
            .catch(function (err) {
                        console.log(err)
                    });

        $http.get("https://api.github.com/users/" + $scope.search)
            .then(function(response){ $scope.userinfo = response.data; })
            .catch(function (err) {
                        console.log(err)
                    });

        $http.get("https://api.github.com/users/" + $scope.search + "/repos")
            .then(
                function(response){
                    $scope.repolist = response.data;

                    // NOTE: select first repo
                    if ($scope.repolist && $scope.repolist.length > 0) {
                        var repo = $scope.repolist[0].name;
                    } else {
                        console.log("Something went wrong here!");
                        var repo = "undefined"
                    }
                    $scope.repo = repo;
                    return repo
                }).then(function (repo) { 
                        $http.get("https://api.github.com/repos/" + $scope.search + "/" + repo + "/events")
                        .then(function (response) { $scope.eventinfo = response.data; console.log(response.data);})
                        return repo; 
                    }).then(function (repo) {
                        $http.get("https://api.github.com/repos/" + $scope.search + "/" + repo + "/languages")
                        .then(function (response) { $scope.languages = response.data; console.log(response.data);})
                    }).catch(function (err) {
                        console.log("Here!" + err);
                    });
    };


    // Function select which ensures that the entire
    // text is selected when the user clicks in the text input.
    $scope.select = function(){
        this.setSelectionRange(0, this.value.length);
    }


});

最佳答案

这是一个可行的解决方案。我删除了一些依赖项只是为了让它在这个沙箱中工作。我用过NOTE:评论以帮助描述重要的变化。

angular.module('myApp', [])
    .controller('DashboardCtrl', function($scope, $http){
        // Set search model to 'mbostock' and the fetch function to contact the
        // remote API and ensure the view is initialized. Load results when the search box changes.
        $scope.$watch('search', function() {
            initialFetch();
                // .then(MakeUrl);
        });
        
        // NOTE: watch for changes to repo
        $scope.$watch('repo', function() {
            $http.get("https://api.github.com/repos/" + $scope.search + "/" + $scope.repo + "/events")
                 .then(function (response) {
                     $scope.eventinfo = response.data;
                  });
                  
            // NOTE: additional request to fetch languages
            $http.get("https://api.github.com/repos/" + $scope.search + "/" + $scope.repo + "/languages")
                 .then(function (response) {
                     console.log(response.data);
                     // TODO: display results
                  });

        });

        var user = $scope.search;
        $scope.search = "mbostock";

        // Make calls to the API for Users and Repo List
        function initialFetch(){
            $http.get("https://api.github.com/users/" + $scope.search)
                .then(function(response){ $scope.userinfo = response.data; });

            $http.get("https://api.github.com/users/" + $scope.search + "/repos")
                .then(
                    function(response){
                        $scope.repolist = response.data;
                        
                        // NOTE: select first repo
                        if ($scope.repolist && $scope.repolist.length > 0) {
                            $scope.repo = $scope.repolist[0].name;
                        }
                    },
                    $http.get("https://api.github.com/repos/" + $scope.search + "/" + $scope.repo + "/events")
                        .then(function (response) { $scope.eventinfo = response.data; })
                );
        }


        // Function select which ensures that the entire
        // text is selected when the user clicks in the text input.
        $scope.select = function(){
            this.setSelectionRange(0, this.value.length);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="container-fluid outerdiv" ng-app="myApp" ng-controller="DashboardCtrl">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand"><b>Github User Information</b> <span class="span-style"></span></a>
            </div>

            <div class="input-group search-bar">
                <input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" onclick="select()" class="form-control" placeholder="Enter Github user login" autofocus />
                <span class="input-group-addon bar-style"><i class="glyphicon glyphicon-search"></i></span>
            </div>
        </div>
    </nav>

    <noscript>
        <div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
    </noscript>

    <div class="animated zoomInRight">


        <div id="user-bio" class="col-sm-4 col-md-4">
            <div>
                <div class="avatar">
                    <img src="{{ userinfo.avatar_url }}" class="thumbnail animated flip movie-poster">
                </div>

                <span class="span-outer">
                    <a href="{{userinfo.html_url}}" target="_blank">{{ userinfo.login }}</a>
                </span><br>{{ userinfo.name }}

                <p><strong>Joined:</strong><br> {{ userinfo.created_at }}</p>
                <p><strong>Last Updated:</strong><br> {{ userinfo.updated_at }}</p>

                <p>{{ userinfo.bio }}</p>

                <p class="outer-p">
                <div class="inner-p">
                    <span class="label label-primary">Public Repos :</span> {{ userinfo.public_repos }}
                </div>
                <div class="inner-p">
                    <span class="label label-primary">Followers :</span> {{ userinfo.followers }}
                </div>
                <div class="inner-p">
                    <span class="label label-primary">Following :</span> {{ userinfo.following }}
                </div>
                </p>

            </div>

            <div ng-if="userinfo.message==='Not Found'">
                No results found.
            </div>
        </div>

        <div class="col-sm-8 col-md-8">
            <h5><strong>Repositories:</strong></h5>
            
            <!-- NOTE: use ng-model and ng-repeat and don't clobber repo variable on scope -->
            <select id="repo-select" ng-model="repo">
                <option ng-repeat="r in repolist" id="repo{{ $index + 1 }}" ng-value="r.name" onchange="MakeUrl();">{{ r.name }}</option>
            </select>

            <h5><strong>Events:</strong></h5>
            <ul class="event-results" id="event-select" style="height:400px; overflow-y:auto;">
                <li ng-repeat="event in eventinfo">
                    <a id="{{ $index + 1 }}" value="{{ event.type }}">{{ event.type }}
                    </a>, {{ event.created_at }} <!--ng-click="update(movie)"-->
                </li>
            </ul>
        </div>

    </div>
</div>

关于javascript - 了解 Angular Promise 和 API 调用——从 API 创建用户仪表板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43750391/

文章推荐： html - 如何相对于非父项定位元素？

文章推荐： php - 使用javascript将焦点放在具有变量名称的文本区域内

文章推荐： c++ - QComboBox 已激活(int)

文章推荐： css - 计算机和移动设备的网络用户界面相同吗？

api - Azure API 管理 - API 端点域与实际 API URL
我已经设置了 Azure API 管理服务，并在自定义域上配置了它。在 Azure 门户中 API 管理服务的配置部分下，我设置了以下内容: 因为这是一个客户端系统，我必须屏蔽细节，但以下是基础知识:
api - 使用 API key 获取 API(Twitter API)
我是一名习惯 React Native 的新程序员。我最近开始学习 Fetch API 及其工作原理。我的问题是，我找不到人们使用 API key 在他们的获取语句中访问信息的示例(我很难清楚地表达有
api - 插件 API 与类库 API
这里有很多关于 API 是什么的东西，但是我找不到我需要的关于插件 API 和类库 API 之间的区别。反正我不明白。在 Documenting APIs 一书中，我读到:插件 API 和类库 AP
api - 谷歌博客搜索 API 的替代 API
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
api - 在现有 API 中使用多个第三方 API 的最佳实践
我正在尝试找出设计以下场景的最佳方法。假设我已经有了一个 REST API 实现，它将从不同的供应商那里获取书籍并将它们返回给我自己的客户端。每个供应商都提供单独的 API 来向其消费者提供图书。
api - REST API 和 API key
请有人向我解释如何使用 api key 以及它有什么用处。我对此进行了很多搜索，但得到了不同且相互矛盾的答案。有人说 API key 是保密的，它从不作为通信的一部分发送，而其他人则将它发送给客户端
api - Flickr api 与 Picasa api
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 4年前关闭。 Improve this
api - WSO2 API Manager API 认证失败
谁能告诉我为什么 WSo2 API 管理器不进行身份验证？我已经设置了两个 WSo2 API Manager 1.8.0 实例并创建了一个 api。它作为原型(prototype) api 工作正常。
api - Fluent API 与其他 API 有何不同？
我在学习 DSL 的过程中遇到了 Fluent API。我在流利的 API 上搜索了很多……我可以得出的基本结论是，流利的 API 使用方法链来使代码流利。但我无法理解——在面向对象的语言中，我们
api - WSO2 API 管理器是否支持 API 联合？
基本上，我感兴趣的是在多个区域设置 WSO2 API 管理器；例如亚洲、美国和欧洲。一些 API 将部署在每个区域的数据中心内，而其他 API 将仅部署在特定区域内。理想情况下，我想要的是一个单一的
api - 使用 API key 保护我的 API
我正在构建自己的 API，供以下用户使用: 1) 安卓应用 2) 桌面应用我的网址之一是:http://api.chatapp.info/order_api/files/getbeers.php我的
api - 如何通过 API Key 授权谷歌分析 API
我需要向所有用户显示我的站点的分析，但使用 OAuth 它显示为登录用户配置的站点的分析。如何使用嵌入 API 实现仪表板但仅显示我的网站分析？我能想到的最好的可能性是使用 API key 而不是客
api - 提供 API 的公司是否在其 API 之前使用填充程序或代理？
我正在研究大公司如何管理其公共(public) API。我想到的是拥有成熟 API 的公司，例如 Google、Facebook、Twitter 和 Amazon。这些公司向公众公开了许多不同的 A
api - 显式 API 方法与广义的基于参数的 API 方法
在定义客户可访问的 API 时，以下是首选的行业惯例: a) 定义一组显式 API 方法，每个方法都有非常狭窄和特定的目的，例如: SetUserName SetUserAge Se
api - GAE API 资源管理器不显示 API，似乎卡在加载中
这在本地 deserver 和部署时都会发生。我成功地能够通过留言簿教程使用 API 资源管理器，但现在我已经创建了自己的项目并尝试访问我编写的第一个 API，它从未出现过。搜索栏旁边的黄色“正在加载
api - 尝试查询 API，但 api 响应为空
我正在尝试使用 http://ip-api.com/ api通过我的ip地址获取经度和纬度。当我访问 http://ip-api.com/json从我的浏览器或使用 curl，它以 json 格式返回
api - 流式 API 与 Rest API？
这里的典型示例是 Twitter 的 API。我从概念上理解 REST API 的工作原理，本质上它只是针对您的特定请求向他们的服务器查询，然后您会在其中收到响应(JSON、XML 等)，很棒。但是
api - 如何让其他 API 与您的 API 对话，而您的 API 又与 Twitter 对话？
我能想到的最好的标题，但要澄清的是，情况是这样的: 我正在开发一种类似短 url 的服务，该服务允许用户使用他们的 Twitter 帐户“登录”并发布内容。现在这项服务可以包含在 Tweetdeck
api - 平面与嵌套 API
我正在设计用于管理评论和讨论线程的 API 方案。我想有一个点 /discussions/:discussionId 当您GET 时，它会返回一组评论和一些元数据。评论也许可以单独访问 /discus
api - 后端和 API 是一样的吗？什么是后端 Web API？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭去年。 Improve this quest

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 了解 Angular Promise 和 API 调用——从 API 创建用户仪表板