如何在React Query useMutation成功回调中获取HTTP响应状态码

核心问题原因 #

你当前的实现有个基础问题：封装的validateIban函数调用axios发请求后，根本没把响应结果return出去。React Query的useMutation只会把请求函数return的内容作为onSuccess的入参，现在函数返回的是空值，自然拿不到状态码。

实现步骤 #

1. 修改底层请求函数，透传响应结果 #

调整validateIban的逻辑，把axios请求的完整响应对象返回出去：

const validateIban = async (accountId, encodedIban) => {
    // 直接return axios的响应对象，不要await后丢弃返回值
    return axios.post(
        `${CUSTOMER_PORTAL_API}/policy/accounts/${accountId}/iban/${encodedIban}`
    );
};

export function useValidateIban(accountId) {
    return useMutation(encodedIban => validateIban(accountId, encodedIban));
}

2. 在成功回调中读取状态码 #

当请求函数返回完整的axios响应后，onSuccess回调的第一个入参就是这个响应对象，直接读取status字段就能拿到202、204这类成功请求的HTTP状态码：

const validateIbanQuery = useValidateIban(accountId)

validateIbanQuery.mutate(encodeURIComponent(iban), {
    // 入参就是之前请求函数返回的axios响应对象
    onSuccess: (response) => {
        // 直接读取HTTP状态码
        const httpStatus = response.status
        // 按不同状态码写对应逻辑即可
        if (httpStatus === 204) {
            // 处理204无响应体的成功场景
        }
        if (httpStatus === 202) {
            // 处理202已接收的异步校验场景
        }
    },
    onError: (error) => {
        // 原有错误逻辑不需要修改，保持即可
        if (error.response.status === 400) {
            ....
        }
        if (error.response.status === 403) {
            ....
        }
    }
})

优化说明 #

如果不想把包含大量冗余配置的完整axios响应透传给React Query，可以在请求层按需裁剪需要的字段，减少无用数据：

const validateIban = async (accountId, encodedIban) => {
    const response = await axios.post(
        `${CUSTOMER_PORTAL_API}/policy/accounts/${accountId}/iban/${encodedIban}`
    );
    // 只返回业务逻辑实际需要的字段
    return {
        statusCode: response.status,
        result: response.data
    };
};

调整后onSuccess中直接读取statusCode即可拿到对应状态码。

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