React/TypeScript中根据MS Graph API响应状态区分显示提示

要区分两种400状态的场景，核心是获取API返回的错误详情，而不只是状态码。具体步骤如下：

1. 修改API调用函数，返回错误详情 #

原函数仅返回状态码，现在需要解析错误响应内容，将错误信息与状态码一起返回：

export async function callMsGraph(id: string) {      
    const options = {
        method: "POST",
        headers: headers,
        body: JSON.stringify({"string"}) // 注意：此处原代码的{"string"}是无效JSON，建议替换为实际合法的请求体结构
    };

    const url = `https://graph.microsoft.com/v1.0/groups/${id}/owners/$ref/`;
    const resp = await fetch(url, options);
    
    // 处理成功响应
    if (resp.ok) {
        return { status: resp.status.toString(), error: null };
    }
    // 处理错误响应，解析错误详情
    else {
        try {
            const errorData = await resp.json();
            return { status: resp.status.toString(), error: errorData.error };
        } catch (e) {
            // 兼容无法解析JSON的异常情况
            return { status: resp.status.toString(), error: { message: "未知错误" } };
        }
    }
}

2. 在组件中存储错误详情，区分场景展示提示 #

新增状态存储错误详情，根据错误消息中的关键词判断具体场景：

import { useState, useEffect } from 'react';

export const Comp: React.FunctionComponent = () => {  
  const [status, setStatus] = useState('');
  // 存储Graph API返回的错误详情
  const [errorDetails, setErrorDetails] = useState<{ code?: string; message?: string } | null>(null);

  useEffect(() => {
    callMsGraph("id")
      .then(({ status, error }) => {
        setStatus(status);
        setErrorDetails(error);
      })
      .catch(err => {
        // 处理网络请求失败等异常
        setErrorDetails({ message: err.message });
      });
  }, [])

  return (
    <div>      
      {(() => {
        if (status === "403") {
          return <div>没有权限</div>;
        } else if (status === "400") {
          if (errorDetails?.message?.includes("already exist")) {
            return <div>成员已添加</div>;
          } else if (errorDetails?.message?.includes("Invalid object identifier")) {
            return <div>无效的组ID</div>;
          } else {
            return <div>请求错误，请检查参数</div>;
          }
        } else if (status === "204") {
          return <div>操作成功</div>;
        }
        // 请求未完成时的提示
        return <div>处理中...</div>;
      })()}
    </div>
  );
};

关键说明 #

• Fetch API不会将400、403这类HTTP错误视为Promise拒绝，必须手动通过resp.ok判断请求是否成功。
• 两种400错误的code均为Request_BadRequest，因此只能通过message中的关键词区分场景。
• 若担心微软后续修改错误消息文本，可考虑提前封装关键词判断逻辑，便于后续维护。

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