如何在React Query中通过PHP Curl API获取POST请求Body参数（不使用Fetch）

React Query本身是数据管理库，依赖底层请求工具实现网络调用。既然要求不使用Fetch API，我们可以用Axios作为请求客户端，配合React Query完成请求，同时确保PHP接口能正确解析请求Body中的参数。

一、前端React Query配置（基于Axios） #

1. 先安装依赖：

npm install axios @tanstack/react-query

2. 编写请求逻辑与组件：

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

// 定义请求函数，返回Promise符合React Query要求
const submitMobileInfo = async (mobileNo) => {
  const response = await axios.post('https://api.example.com/plans', {
    mobile_no: mobileNo
  }, {
    // 必须设置JSON格式请求头，否则PHP无法正确解析Body
    headers: { 'Content-Type': 'application/json' }
  });
  return response.data;
};

function PlanSubmitComponent() {
  // 使用React Query的useMutation处理POST请求
  const { mutate, isLoading } = useMutation({
    mutationFn: submitMobileInfo,
    onSuccess: (res) => console.log('请求成功:', res),
    onError: (err) => console.error('请求失败:', err)
  });

  const handleClick = () => {
    mutate('13800138000'); // 传入实际手机号参数
  };

  return (
    <button onClick={handleClick} disabled={isLoading}>
      {isLoading ? '提交中...' : '提交手机号'}
    </button>
  );
}

二、PHP接口处理（获取请求Body参数） #

由于前端发送的是JSON格式Body，PHP默认不会将其解析到$_POST数组，需手动读取原始请求体并解析：

<?php
// api.example.com/plans 对应的PHP文件
header("Content-Type: application/json");

// 读取原始请求Body
$rawBody = file_get_contents('php://input');
// 解析为关联数组
$requestData = json_decode($rawBody, true);

// 校验并处理参数
if (isset($requestData['mobile_no'])) {
  $mobileNo = $requestData['mobile_no'];
  // 这里直接处理业务逻辑，无需存入数据库
  echo json_encode([
    'status' => 'success',
    'msg' => '参数接收成功',
    'mobile_no' => $mobileNo
  ]);
} else {
  echo json_encode([
    'status' => 'error',
    'msg' => '缺少mobile_no参数'
  ]);
}
?>

三、若PHP需用Curl转发请求（可选场景） #

如果你的PHP接口需要将参数转发给其他服务，Curl配置需注意JSON格式的处理：

<?php
header("Content-Type: application/json");

// 先接收前端参数
$rawBody = file_get_contents('php://input');
$requestData = json_decode($rawBody, true);

if (!isset($requestData['mobile_no'])) {
  echo json_encode(['status' => 'error', 'msg' => '参数缺失']);
  exit;
}

// 初始化Curl请求
$curl = curl_init();
curl_setopt_array($curl, [
  CURLOPT_URL => "https://target-api.example.com/plans",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_POST => true,
  // 将参数转为JSON字符串作为请求Body
  CURLOPT_POSTFIELDS => json_encode(['mobile_no' => $requestData['mobile_no']]),
  // 必须设置JSON请求头
  CURLOPT_HTTPHEADER => ["Content-Type: application/json"],
]);

$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);

// 返回转发结果
if ($err) {
  echo json_encode(['status' => 'error', 'msg' => '转发失败: ' . $err]);
} else {
  echo json_encode(['status' => 'success', 'data' => json_decode($response, true)]);
}
?>

关键注意事项 #

• 无论前端发送还是PHP转发请求，必须设置Content-Type: application/json请求头，否则无法正确解析JSON格式的Body参数。
• React Query仅负责数据缓存与状态管理，底层请求由Axios完成，完全符合“不使用Fetch API”的要求。
• 全程无需操作数据库，直接处理参数并返回结果即可。

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