ReactJS/NodeJS：如何在API请求中将周数与赛季变量传递到后端

一、修改前端React代码，传递查询参数 #

前端通过Axios的params选项将week和season作为查询参数发送给后端：

// 前端组件中的API调用函数
const fetchNrlData = async (targetWeek, targetSeason) => {
  try {
    const response = await axios.get('/nrl', {
      params: {
        week: targetWeek,
        season: targetSeason
      }
    });
    // 处理返回的赛事数据
    return response.data;
  } catch (err) {
    console.error('获取赛事数据失败:', err);
    throw err;
  }
};

// 调用示例：获取2022赛季第20轮数据
fetchNrlData(20, 2022);

二、修改Express后端代码，接收并转发参数 #

后端从请求的查询参数中获取week和season，拼接成本地数据源的请求URL后转发请求：

基于原request库的实现

const request = require('request');
const express = require('express');
const app = express();

app.get('/nrl', (req, res) => {
  // 提取前端传入的参数
  const { week, season } = req.query;

  // 参数校验：确保两个参数都存在
  if (!week || !season) {
    return res.status(400).json({ error: '必须提供week和season参数' });
  }

  // 拼接本地数据源的请求地址
  const dataSourceUrl = `http://127.0.0.1:5000/nrl/week=${week}&season=${season}`;

  // 转发请求到本地服务器并返回结果给前端
  request(dataSourceUrl, (err, _, body) => {
    if (err) {
      return res.status(500).json({ error: '无法连接到赛事数据源' });
    }
    res.send(body);
  });
});

// 启动服务器（示例端口）
app.listen(3001, () => console.log('后端服务运行在3001端口'));

推荐：改用Axios替代request（request已停止维护）

const axios = require('axios');
const express = require('express');
const app = express();

app.get('/nrl', async (req, res) => {
  const { week, season } = req.query;

  // 更严格的参数校验：确保是有效数字格式
  if (!week || !season || isNaN(parseInt(week)) || isNaN(parseInt(season)) || season.length !== 4) {
    return res.status(400).json({ error: '参数格式错误：week为数字，season为四位年份' });
  }

  try {
    const dataResponse = await axios.get(`http://127.0.0.1:5000/nrl/week=${week}&season=${season}`);
    res.json(dataResponse.data);
  } catch (err) {
    res.status(500).json({ error: '获取赛事数据失败' });
  }
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

三、调用说明 #

前端请求后端的URL示例：http://your-backend-domain/nrl?week=20&season=2022，后端会自动转发到本地数据源的对应接口。

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