了解用于 TFS 小部件的 JavaScript

Question

我一直在尝试修改此位置的示例仪表板小部件

https://docs.microsoft.com/en-us/vsts/extend/develop/add-dashboard-widget?view=vsts#part-2-hello-world-with-vsts-rest-api

但是，不得不承认我根本无法理解扩展它所需的结构

接近尾声时，它使用“load: function”并返回 REST API 调用的输出，我可以随意使用它

但是，我需要进行不止一次不同的 REST 调用，而且我根本不知道如何让这些信息在我的函数中可用

我修改了代码，所以它的开头是这样的：

VSS.require(["TFS/Dashboards/WidgetHelpers", "TFS/Work/RestClient","VSS/Service", "TFS/WorkItemTracking/RestClient" ], 

然后我为我想要进行的另一个调用创建了一个句柄，如下所示：

var queryClient = VSS_Service.getCollectionClient(TFS_Wit_QueryAPI.WorkItemTrackingHttpClient);

var queryResults = queryClient.getQuery(projectId, "Shared Queries/My Bugs");

但是，我无法使用 queryResults 的内容 - 我知道它的工作状态就像我输入了一个无效的 URL 一样，它会出错，因为它知道它无法访问那里的任何内容。如果 URL 是正确的，无论我尝试了什么 - 甚至 stringify 只是为了看看返回的结果 - 我都会得到“未定义”或类似的东西（它绝对是一个有效的 JavaScript 对象）

当你有“加载：函数”时，关键似乎就在最后，除了只允许返回一件事？我知道这一点的原因是，如果我将返回的函数更改为我编写的函数而不是示例中的函数，它可以正常工作 - 但问题仍然存在，因为我只能处理一个结果API 调用。

Answer 1

您可以调用多个 API，那篇文章中的代码只是简单的示例。

对于 Widget 扩展，你只需要在 load 函数中返回状态（例如 Success()），这样你就可以在函数结束时返回状态。例如：

var getQueryInfo = function (widgetSettings) {
                        // Get a WIT client to make REST calls to VSTS
                        return TFS_Wit_WebApi.getClient().getQuery(projectId, "Shared Queries/Feedback")
                            .then(function (query) {
                                // Create a list with query details                                
                                var $list = $('<ul>');
                                $list.append($('<li>').text("Query ID: " + query.id));
                                $list.append($('<li>').text("Query Name: " + query.name));
                                $list.append($('<li>').text("Created By: " + (query.createdBy ? query.createdBy.displayName: "<unknown>") ));

                                // Append the list to the query-info-container
                                var $container = $('#query-info-container');
                                $container.empty();
                                $container.append($list);

                                // Use the widget helper and return success as Widget Status
                                return true;
                            }, function (error) {
                                // Use the widget helper and return failure as Widget Status
                           console.log(error);     
                           return false;
                            });
                    }

var getAnOhterQueryInfo = function (widgetSettings) {
                        // Get a WIT client to make REST calls to VSTS
                        return TFS_Wit_WebApi.getClient().getQuery(projectId, "Shared Queries/Bug")
                            .then(function (query) {
                                // Create a list with query details                                
                                var $list = $('<ul>');
                                $list.append($('<li>').text("Query ID: " + query.id));
                                $list.append($('<li>').text("Query Name: " + query.name));
                                $list.append($('<li>').text("Created By: " + (query.createdBy ? query.createdBy.displayName: "<unknown>") ));

                                // Append the list to the query-info-container
                                var $container = $('#query-info-container');
                                $container.empty();
                                $container.append($list);

                                // Use the widget helper and return success as Widget Status
                                return true;
                            }, function (error) {
                                // Use the widget helper and return failure as Widget Status
                           console.log(error);     
                           return false;
                            });
                    }

return {
                        load: function (widgetSettings) {
                            // Set your title
                            var $title = $('h2.title');
                            $title.text('Hello World');

                            var r1= getQueryInfo(widgetSettings);
                            var r2=getAnOhterQueryInfo(widgetSettings);
                            if(r1==true && r2==true){
                                return WidgetHelpers.WidgetStatusHelper.Success();
                             }else{

                           return WidgetHelpers.WidgetStatusHelper.Failure("failed, check error in console");
                        }
                    }