javascript - 了解 TFS 小部件的 JavaScript

Question

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

https://learn.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 对象)

当你有“load: function”时，关键似乎就在最后，除了只允许返回一件事？我知道这一点的原因是，如果我将它返回的函数更改为我编写的函数而不是示例中的函数，它可以正常工作 - 但问题仍然相同，因为我只能处理一个函数的结果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");
                        }
                    }