React/TypeScript中如何根据Graph API调用状态展示消息？

第一步：修正API调用函数callMsGraph #

原代码的问题在于fetch不会自动将非2xx状态码判定为错误，且204响应无内容时调用response.json()会报错。同时POST请求到/owners/$ref需要携带合法请求体，否则会触发400错误，以下是修正后的代码：

export async function callMsGraph(groupId: string) {    
    const headers = new Headers();
    // 必须添加授权头，否则Graph API会拒绝请求，示例如下
    // headers.append('Authorization', `Bearer ${yourAccessToken}`);

    // POST到/owners/$ref需要指定要添加的用户/组，补充合法请求体
    const requestBody = {
        "@odata.id": "https://graph.microsoft.com/v1.0/users/{目标用户ID}" // 替换为实际用户ID或组ID
    };

    const options = {
        method: "POST",
        headers: headers,
        body: JSON.stringify(requestBody)
    };
    
    const url = `https://graph.microsoft.com/v1.0/groups/${groupId}/owners/$ref/`;
    try {
        const response = await fetch(url, options);
        if (response.status === 204) {
            // 204无内容，返回成功标识
            return { success: true };
        } else if (response.status === 400) {
            // 解析400错误的详细信息
            const errorData = await response.json();
            return { success: false, error: errorData.error.message || '请求参数错误' };
        } else {
            // 处理其他非成功状态码
            const errorData = await response.json().catch(() => ({ message: '未知错误' }));
            return { success: false, error: errorData.message || '请求失败' };
        }
    } catch (error) {
        // 处理网络异常等情况
        return { success: false, error: '网络连接异常，请检查后重试' };
    }
}

第二步：修改OwnerPage组件逻辑 #

新增状态存储提示消息，根据API返回结果更新UI展示：

import React, { useState } from 'react';
import { DefaultButton } from '@fluentui/react';

export const OwnerPage: React.FunctionComponent = () => {    
    // 变量名改为小驼峰，符合TypeScript代码规范
    const [textFieldValue, setTextFieldValue] = useState('');
    // 新增状态，用于存储要展示的提示消息
    const [statusMessage, setStatusMessage] = useState<string>('');

    const onClick = async () => {    
        // 点击按钮时先清空之前的提示
        setStatusMessage('');
        // 调用API并处理返回结果
        const result = await callMsGraph(textFieldValue);
        if (result.success) {
            setStatusMessage('Success');
        } else {
            setStatusMessage(`Failure: ${result.error}`);
        }
    };

    const stackStyles = { root: { height: 44 } };
    return (
        <div>         
            <DefaultButton onClick={onClick}>添加所有者</DefaultButton>
            {/* 根据状态消息展示提示，成功绿色，失败红色 */}
            {statusMessage && (
                <div 
                    style={{ 
                        marginTop: '16px', 
                        color: statusMessage.startsWith('Success') ? 'green' : 'red',
                        fontSize: '14px'
                    }}
                >
                    {statusMessage}
                </div>
            )}
        </div>
    );
};

关键说明 #

1. 状态码处理：fetch仅在网络故障时才会触发catch，因此必须手动检查response.status来判断请求结果
2. 204响应处理：该状态码无响应体，不能调用response.json()，否则会抛出解析错误
3. 请求体要求：Graph API的POST /groups/{groupId}/owners/$ref端点必须携带@odata.id参数，指定要添加为所有者的用户或组ID，否则会返回400错误
4. 代码规范：变量名遵循小驼峰命名法，使用async/await替代链式.then/.catch，提升代码可读性

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