如何在React.js Web应用中从指定URL接口获取职位列表数据

接口基础参数 #

• 请求地址：http://refertest.pythonanywhere.com/job/openings
• 请求方法：GET
• 必传请求头：tid: 3441
• 响应规则：返回JSON格式数据，当statusCode字段值为0时代表请求成功，职位列表数据存放在data数组字段中

具体实现 #

以下方案基于React 16.8+ 函数组件 + Hooks 编写，兼容目前绝大多数React项目版本。

方案1：原生Fetch API实现（无额外依赖） #

不需要安装第三方请求库，直接使用浏览器原生能力即可，完整组件代码如下：

import { useEffect, useState } from 'react';

export default function JobOpenings() {
  // 管理三类核心状态：数据、加载态、错误信息
  const [jobList, setJobList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    // 支持请求中断，避免组件卸载后更新状态导致内存泄漏
    const abortController = new AbortController();

    const getJobData = async () => {
      setLoading(true);
      setErrorMsg('');
      try {
        const res = await fetch('http://refertest.pythonanywhere.com/job/openings', {
          method: 'GET',
          headers: { tid: '3441' },
          signal: abortController.signal
        });
        // 先校验HTTP层状态
        if (!res.ok) throw new Error(`请求失败，HTTP状态码：${res.status}`);
        const result = await res.json();
        // 再校验业务层状态
        if (result.statusCode !== 0) {
          throw new Error(result.statusMessage || '获取职位数据异常');
        }
        // 数据兜底，避免接口返回null导致渲染报错
        setJobList(Array.isArray(result.data) ? result.data : []);
      } catch (err) {
        // 忽略主动中断请求的报错
        if (err.name !== 'AbortError') {
          setErrorMsg(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    getJobData();

    // 组件卸载时中断未完成的请求
    return () => abortController.abort();
  }, []);

  // 按状态渲染对应UI
  if (loading) return <div>职位数据加载中...</div>;
  if (errorMsg) return <div>加载失败：{errorMsg}</div>;
  return (
    <div className="job-container">
      <h2>当前空缺职位</h2>
      {jobList.length === 0 ? (
        <p>暂无开放职位</p>
      ) : (
        <ul className="job-list">
          {jobList.map((job, index) => (
            <li key={job.id || index} className="job-item">
              {/* 按接口实际返回字段渲染即可，示例字段可自行替换 */}
              <h3>{job.title}</h3>
              <p>{job.department} | {job.location} | {job.salaryRange}</p>
              <p>{job.description}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

方案2：Axios实现（适合已有全局请求封装的项目） #

如果项目已经统一使用Axios做请求处理，可以按如下方式实现，先安装依赖：
npm install axios
或
yarn add axios

可以先封装通用的接口请求实例，方便全局复用：

// src/utils/request.js
import axios from 'axios';

const request = axios.create({
  baseURL: 'http://refertest.pythonanywhere.com',
  timeout: 10000,
  headers: { tid: 3441 }
});

export default request;

组件内调用逻辑替换Fetch部分即可：

import request from '@/utils/request';

// useEffect内的请求逻辑
const getJobData = async () => {
  setLoading(true);
  setErrorMsg('');
  try {
    const res = await request.get('/job/openings');
    const result = res.data;
    if (result.statusCode !== 0) {
      throw new Error(result.statusMessage || '获取职位数据异常');
    }
    setJobList(Array.isArray(result.data) ? result.data : []);
  } catch (err) {
    setErrorMsg(err.response?.data?.statusMessage || err.message);
  } finally {
    setLoading(false);
  }
};

常见问题处理 #

• 跨域报错：本地开发时如果出现跨域拦截，直接在Vite/Webpack开发服务配置中添加接口代理即可，生产环境可以通过Nginx反向代理解决，不要修改浏览器安全配置。
• 字段兼容：如果接口返回的职位字段存在空值，渲染前要做兜底处理，避免页面白屏。
• 重复请求：如果页面存在多次触发拉取的场景，可以加请求锁，避免重复发起相同请求。

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