NextJS中SWR请求无法返回数据？求正确SWR POST请求结构

你写的代码存在几个问题： #

• key数组里的变量名header和fetcher参数里的token不匹配，变量名需统一
• 未保留原代码里的Content-Type: application/x-www-form-urlencoded请求头，可能导致后端无法正确解析请求体
• 缺少原代码中的错误处理逻辑
• fetcher参数顺序必须和useSWR的key数组元素顺序严格对应

正确的代码结构如下： #

1. 定义带完整配置的fetcher函数

const fetcher = async (apiUrl, requestBody, authToken) => {
  try {
    const response = await axios.post(apiUrl, requestBody, {
      headers: {
        Authorization: `Bearer ${authToken}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });
    return response.data;
  } catch (error) {
    console.error('POST请求失败:', error);
    // 和原逻辑一致，请求失败时返回null
    return null;
  }
};

2. 使用useSWR发起请求

// 替换成你实际的API地址、请求体和token变量
const { data, isLoading, error } = useSWR(
  ['你的API接口地址', { /* 这里是请求体参数 */ }, token],
  fetcher
);

关键注意事项： #

• key数组的元素顺序：必须和fetcher的参数顺序完全对应，SWR会把数组里的元素依次传入fetcher
• key数组的内容：所有会影响请求结果的变量都要放进数组，比如token更新、请求体变化时，SWR会自动重新发起请求
• 请求头配置：严格保留原代码里的Content-Type，否则后端可能无法正确解析表单格式的请求体
• 状态处理：useSWR返回的isLoading可用来显示加载状态，若把fetcher里的return null改成throw error，则可通过error属性捕获错误

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