咨询：如何在React应用中编写代码向Azure API发送POST请求创建Backlog

核心请求要求 #

• 认证：与GET请求一致，需携带有效认证凭证（如Azure DevOps的PAT令牌），确保权限覆盖Work Items写入操作
• 请求头：必须设置Content-Type: application/json-patch+json（Azure工作项API要求JSON Patch格式）
• 请求体：遵循JSON Patch规范，以操作数组形式定义Backlog项的字段值

Fetch 实现示例 #

import { useState } from 'react';

const CreateBacklogItem = () => {
  const [error, setError] = useState('');

  const createBacklog = async () => {
    // 替换为你的组织、项目名称和API版本
    const azureApiUrl = 'https://dev.azure.com/{你的组织}/{项目}/_apis/wit/workitems/$Backlog Item?api-version=7.1-preview.3';
    // 建议从环境变量读取，避免硬编码
    const patToken = process.env.REACT_APP_AZURE_PAT;

    // JSON Patch格式的请求体，定义要设置的字段
    const requestBody = [
      { op: 'add', path: '/fields/System.Title', value: '新Backlog项标题' },
      { op: 'add', path: '/fields/System.Description', value: 'Backlog项详细描述' },
      { op: 'add', path: '/fields/System.AssignedTo', value: 'assignee@example.com' }
    ];

    try {
      const response = await fetch(azureApiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json-patch+json',
          // PAT认证格式：Basic 编码后的空用户名+冒号+令牌
          'Authorization': `Basic ${btoa(`:${patToken}`)}`
        },
        body: JSON.stringify(requestBody)
      });

      if (!response.ok) {
        const errDetails = await response.text();
        throw new Error(`请求失败: ${response.status} - ${errDetails}`);
      }

      const result = await response.json();
      console.log('Backlog创建成功:', result);
      // 可添加成功后的业务逻辑（如页面跳转、提示）
    } catch (err) {
      setError(err.message);
      console.error('创建失败:', err);
    }
  };

  return (
    <div>
      <button onClick={createBacklog}>创建Backlog项</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};

export default CreateBacklogItem;

Axios 实现示例 #

先安装依赖：npm install axios 或 yarn add axios

import { useState } from 'react';
import axios from 'axios';

const CreateBacklogItem = () => {
  const [error, setError] = useState('');

  const createBacklog = async () => {
    const azureApiUrl = 'https://dev.azure.com/{你的组织}/{项目}/_apis/wit/workitems/$Backlog Item?api-version=7.1-preview.3';
    const patToken = process.env.REACT_APP_AZURE_PAT;

    const requestBody = [
      { op: 'add', path: '/fields/System.Title', value: '新Backlog项标题' },
      { op: 'add', path: '/fields/System.Description', value: 'Backlog项详细描述' }
    ];

    try {
      const response = await axios.post(azureApiUrl, requestBody, {
        headers: {
          'Content-Type': 'application/json-patch+json',
          'Authorization': `Basic ${btoa(`:${patToken}`)}`
        }
      });

      console.log('Backlog创建成功:', response.data);
      // 成功逻辑
    } catch (err) {
      const errMsg = err.response 
        ? `${err.response.status} - ${err.response.data?.message || '未知错误'}` 
        : err.message;
      setError(errMsg);
      console.error('创建失败:', err);
    }
  };

  return (
    <div>
      <button onClick={createBacklog}>创建Backlog项</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
};

export default CreateBacklogItem;

关键注意事项 #

• PAT权限：确保PAT令牌拥有Work Items (Write)权限，否则会返回403禁止访问
• JSON Patch规范：Azure工作项API不接受普通JSON请求体，必须使用包含op、path、value的操作数组
• 环境变量：敏感信息（如PAT令牌）必须存储在.env文件中，通过process.env.REACT_APP_*读取，避免代码泄露
• API版本：可根据Azure官方文档调整API版本，优先使用稳定版而非预览版

内容的提问来源于stack exchange，提问作者eamohego