列出所有使用 Reactjs 的 Azure DevOps 项目

Question

我想列出从我使用 React 的 API 调用返回的所有项目。我目前只有 C# 代码，它获取用户有权访问的所有项目并以 JSON 格式显示。在代码中硬编码个人访问令牌（因为我不知道该怎么做）。现在，我希望列出所有使用 React 返回的项目，以便用户可以从下拉菜单中选择他们想要处理的所需项目。

我对 React 几乎没有经验，也从未将它与 REST API 一起使用。

（如果有人对上述问题有答案，我将非常感谢您对另一个问题的帮助。我也在尝试在用户选择的项目中创建一个新存储库，我希望他们能够使用输入字段指定此存储库的名称。一旦用户指定了所需的存储库名称并从下拉菜单中选择了项目，他们应该能够点击“提交”以启动对 REST API 的 POST 请求并在项目中创建新的存储库。这也将使用 React 完成。）

Answer 1

您可能需要检查此代码库：azure-devops-node-api-sample。我们已经在该仓库中提供了示例代码。

Get project:

public async getProjects(
        stateFilter?: any,
        top?: number,
        skip?: number,
        continuationToken?: string,
        getDefaultTeamImageUrl?: boolean
        ): Promise<CoreInterfaces.TeamProjectReference[]> {

        return new Promise<CoreInterfaces.TeamProjectReference[]>(async (resolve, reject) => {
            let routeValues: any = {
            };

            let queryValues: any = {
                stateFilter: stateFilter,
                '$top': top,
                '$skip': skip,
                continuationToken: continuationToken,
                getDefaultTeamImageUrl: getDefaultTeamImageUrl,
            };

            try {
                let verData: vsom.ClientVersioningData = await this.vsoClient.getVersioningData(
                    "6.0-preview.4",
                    "core",
                    "603fe2ac-9723-48b9-88ad-09305aa6c6e1",
                    routeValues,
                    queryValues);

                let url: string = verData.requestUrl!;
                let options: restm.IRequestOptions = this.createRequestOptions('application/json', 
                                                                                verData.apiVersion);

                let res: restm.IRestResponse<CoreInterfaces.TeamProjectReference[]>;
                res = await this.rest.get<CoreInterfaces.TeamProjectReference[]>(url, options);

                let ret = this.formatResponse(res.result,
                                              CoreInterfaces.TypeInfo.TeamProjectReference,
                                              true);

                resolve(ret);

            }
            catch (err) {
                reject(err);
            }
        });
    }

您可以继续查看此sample 页面，它向您展示了许多示例，包括创建项目。