POST Request to Azure DevOps Rest API with Reactjs

问题

So far I've been able to configure a method in C# that is able to hardcode a new repository in Azure DevOps, but my real goal is to create a user interface that allows the user to specify the request body which consists of the following:

name: 'nameOfRepository', project: { id: 'projectId' }

The user will fill out the first input field with the desired name of the new repository. The second input field should use a GET Request that displays all available projects in your organization in a dropdown list. I'm also using .NET Core 3.0 and believe this probably has to be done with an API controller as well, but I am not certain.

I have little to no experience with React and have no idea how and where I'm going to specify the request body and personal access token to create the repository. I would appreciate an explanation of how this works and would also appreciate a solution that could guide me in the right direction.

回答1:

Azure DevOps Rest API Documentation will give you access to the platform. If you are decided to develop totally in React js. I would like to suggest to take a starter kit, mostly will cover all your basic setup to React.

Follow the below steps to get an idea of how you can achieve with react js

Need to set up OAuth in azure deops. The below link will give an idea. In the callback page, you need to store access token store
https://docs.microsoft.com/en-us/azure/devops/integrate/get-started/authentication/oauth?view=azure-devops. If you have personal auth token this is not required

Get all list of repositories using fetch or Axios API Example with 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);
      });

Use react form to capture the input value and on submit of form, validate against the repositories, if it is new call the Axios or fetch post method to create a new repository

Example with 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);
          });

Similarly, you can access all the API's mentioned REST API documentation of Microsoft. link

来源：https://stackoverflow.com/questions/60618173/post-request-to-azure-devops-rest-api-with-reactjs

标签

reactjs

azure-devops-rest-api