使用 Reactjs 向 Azure DevOps Rest API 发布请求

Question

到目前为止，我已经能够在 C# 中配置一个能够在 Azure DevOps 中硬编码新存储库的方法，但我的真正目标是创建一个用户界面，允许用户指定由以下内容组成的请求正文以下：

name: 'nameOfRepository', 项目： { ID：“项目 ID” }

用户将使用所需的新存储库名称填写第一个输入字段。第二个输入字段应使用 GET 请求，在下拉列表中显示您组织中的所有可用项目。 我也在使用 .NET Core 3.0，并且相信这可能也必须使用 API 控制器来完成，但我不确定。

我几乎没有使用 React 的经验，也不知道我将如何以及在何处指定请求正文和个人访问令牌来创建存储库。我希望能解释一下这是如何工作的，也希望有一个可以引导我朝着正确方向前进的解决方案。

Answer 1

Azure DevOps Rest API 文档将使您能够访问该平台。如果你决定完全使用 React js 进行开发。我想建议使用一个入门工具包，大部分内容将涵盖您对 React 的所有基本设置。

按照以下步骤了解如何使用 react js 实现

1. 需要在 azure deops 中设置 OAuth。下面的链接将给出一个想法。在回调页面中，需要存储访问令牌store
   https://docs.microsoft.com/en-us/azure/devops/integrate/get-started/authentication/oauth?view=azure-devops。如果您有个人身份验证令牌，则不需要

2. 使用 fetch 或 Axios API 获取所有存储库列表 Axios 示例：

   const headers = {
          'Content-Type': 'application/json',
           'Authorization': 'bearer token' or 'basic personalaccesstoken'
        }
   
   axios.get('https://dev.azure.com/{organization}/{project}/_apis/git/repositories', {
           headers: headers,
           params: {
           'api-version':'5.1'
         }
         })
         .then(function (response) {
           console.log(response);
         })
         .catch(function (error) {
           console.log(error);
         });
   

3. 使用 react form 来捕获输入值并在提交表单时验证存储库，如果是新的，请调用 Axios 或 fetch post 方法来创建新存储库

Axios 示例

  const headers = {
      'Content-Type': 'application/json',
      'Authorization': 'bearer token'
    }
    const data = {
    name: '' 
    parentRepository: {id: '', ....}
    project: {id: '', ...}
    }
     axios.post('https://dev.azure.com/{organization}/{project}/_apis/git/repositories', JSON.stringify(data), 
     {
            headers: headers,
            params: {
            'api-version':'5.1'
          }
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

同样，您可以访问所有提到的 API 的 Microsoft REST API 文档。 link