如何结合useSWR、Axios及请求头配置实现POST请求？

1. 统一配置Axios实例 #

先创建全局Axios实例，统一处理请求头和基础URL，避免重复配置：

import axios from 'axios';

// 创建Axios实例
const api = axios.create({
  baseURL: 'http://127.0.0.1:8000/api/v1',
  headers: {
    'Content-Type': 'application/json',
  },
});

// 可选：添加JWT请求拦截器（适配后端simplejwt验证）
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default api;

2. 封装请求函数 #

针对POST注册请求单独封装函数，同时保留useSWR需要的GET请求fetcher：

import api from './path-to-your-axios-instance';

// useSWR默认GET请求的fetcher
export const fetcher = (url) => api.get(url).then(res => res.data);

// 注册用户的POST请求函数
export const registerUser = async (userData) => {
  try {
    const response = await api.post('/users/register/', userData);
    return response.data;
  } catch (error) {
    // 抛出后端返回的具体错误信息
    throw error.response?.data || error.message;
  }
};

3. 结合useSWR的mutate实现POST请求 #

useSWR核心用于数据缓存同步，POST这类修改操作通过mutate方法触发：

import React, { useState } from 'react';
import { useSWRConfig } from 'swr';
import { registerUser } from './path-to-your-request-functions';

function RegisterForm() {
  const { mutate } = useSWRConfig();
  const [formData, setFormData] = useState({
    name: '',
    family: '',
    email: '',
    password: ''
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 执行注册POST请求
      const newUser = await registerUser(formData);
      // 可选：如果有需要同步的缓存数据（比如用户列表），调用mutate更新
      // mutate('/users/list');
      alert('注册成功');
      console.log(newUser);
    } catch (error) {
      console.error('注册失败:', error);
      alert(`注册失败: ${error.detail || error}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.name}
        onChange={(e) => setFormData(prev => ({...prev, name: e.target.value}))}
        placeholder="姓名"
        required
      />
      <input
        type="text"
        value={formData.family}
        onChange={(e) => setFormData(prev => ({...prev, family: e.target.value}))}
        placeholder="姓氏"
        required
      />
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData(prev => ({...prev, email: e.target.value}))}
        placeholder="邮箱"
        required
      />
      <input
        type="password"
        value={formData.password}
        onChange={(e) => setFormData(prev => ({...prev, password: e.target.value}))}
        placeholder="密码"
        required
      />
      <button type="submit">注册</button>
    </form>
  );
}

export default RegisterForm;

4. Django后端适配要点 #

确保注册接口接受JSON格式请求，并允许匿名访问：

# views.py
from rest_framework import generics, status
from rest_framework.response import Response
from .serializers import RegisterSerializer
from rest_framework_simplejwt.tokens import RefreshToken

class RegisterView(generics.CreateAPIView):
    serializer_class = RegisterSerializer
    permission_classes = []  # 允许匿名访问

    def create(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = serializer.save()
        # 返回JWT Token（可选，根据业务需求）
        refresh = RefreshToken.for_user(user)
        return Response({
            'user': serializer.data,
            'refresh': str(refresh),
            'access': str(refresh.access_token),
        }, status=status.HTTP_201_CREATED)

关键注意事项 #

• useSWR定位：useSWR主打数据获取与缓存同步，POST这类修改操作请用mutate触发，不要直接用useSWR的第一个参数（该参数为GET请求路径设计）。
• 请求头拼写：你的参考代码中header拼写错误，正确写法是headers（复数），Axios实例配置已统一修正此问题。
• 错误处理：需捕获Axios请求错误，重点处理Django后端返回的序列化错误（如邮箱重复、密码长度不达标等）。
• JWT同步：如果后续接口需要带Token，通过Axios拦截器统一注入请求头，无需每次手动配置。

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