如何将服务器端API调用的自定义响应传入客户端fetch()

你当前的fetch请求只收到了处理页面返回的基础成功响应（200状态码），但并没有拿到处理页面内部调用API后的具体结果——这是因为你的处理页面没有把API调用的响应数据回传给客户端，只是默认返回了一个空的成功状态。

解决步骤 #

1. 修改服务器端处理页面，返回API调用结果 #

在处理页面完成API调用并获取到apiCall.statusCode（以及其他你需要的API响应数据）后，需要将这些数据作为HTTP响应的主体返回给客户端。根据你使用的后端技术，实现方式略有不同：

示例（Node.js/Express）：

// 处理页面的服务器端逻辑
async function handleFormSubmit(req, res) {
  try {
    // 执行你的API调用
    const apiResponse = await yourApiCallFunction();
    // 将API的响应数据返回给客户端
    res.status(apiResponse.statusCode).json({
      apiStatusCode: apiResponse.statusCode,
      apiData: apiResponse.data // 如果有其他需要传递的数据
    });
  } catch (error) {
    // 处理API调用失败的情况，返回错误信息
    res.status(500).json({
      error: "API调用失败",
      details: error.message
    });
  }
}

示例（PHP）：

// 处理页面的PHP代码
$apiResponse = yourApiCallFunction(); // 执行API调用
// 返回JSON格式的结果
header('Content-Type: application/json');
echo json_encode([
  'apiStatusCode' => $apiResponse['statusCode'],
  'apiData' => $apiResponse['data']
]);
exit;

2. 修改客户端fetch代码，解析响应主体 #

fetch返回的res只是一个响应对象，包含状态码、头等元数据，你需要调用res.json()（如果返回的是JSON格式）来解析响应主体的实际数据：

fetch("xxxx", { 
  method: "POST", 
  headers: { "Content-Type": "application/json" }, 
  body: JSON.stringify({ fileEnc: fileEnc, fileName: fileName, fileType: fileType }) 
}) 
.then(function(res) {
  // 先检查响应状态是否正常
  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }
  // 解析JSON格式的响应主体
  return res.json();
})
.then(function(apiResult) {
  // 这里就能拿到处理页面返回的API调用结果了
  console.log("API调用成功！结果：", apiResult);
  console.log("API状态码：", apiResult.apiStatusCode);
})
.catch(function(err) {
  // 注意：之前的catch里误用了res，这里应该用err
  console.log("Error!", err);
});

额外注意点 #

• 确保处理页面返回的响应格式是JSON（设置正确的Content-Type: application/json头），这样客户端的res.json()才能正确解析。
• 你的原代码中catch块里的console.log("Error!", res)是错误的，res在catch作用域内不存在，应该使用err来捕获错误信息。

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