react前端项目 fetch原生与 umijs request 四种请求区别

一、核心区别先览

首先明确：fetch 是浏览器原生 API，仅提供最基础的网络请求能力；而 umijs request 是基于 fetch 封装的上层库，内置了拦截器、错误处理、参数序列化、超时控制等工程化能力，更适合中大型前端项目。

下面通过 GET/POST/PUT/DELETE 四种请求的代码对比，直观展示两者的区别：

1. 原生 fetch 实现四种请求

javascript

运行

javascript 复制代码

// 1. GET 请求（带参数）
async function fetchGet() {
  try {
    const params = new URLSearchParams({ id: '123', name: 'test' });
    const response = await fetch(`https://api.example.com/data?${params.toString()}`, {
      method: 'GET', // 默认就是GET，可省略
      headers: {
        'Content-Type': 'application/json',
      },
      credentials: 'include', // 携带cookie需手动配置
    });
    
    // fetch 不会主动抛出 HTTP 错误（如404/500），需手动判断
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('GET结果:', data);
  } catch (err) {
    console.error('GET请求失败:', err);
  }
}

// 2. POST 请求（JSON 数据）
async function fetchPost() {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'test', age: 20 }), // 需手动序列化
      credentials: 'include',
    });
    
    if (!response.ok) throw new Error(`status: ${response.status}`);
    const data = await response.json();
    console.log('POST结果:', data);
  } catch (err) {
    console.error('POST请求失败:', err);
  }
}

// 3. PUT 请求（更新数据）
async function fetchPut() {
  try {
    const response = await fetch('https://api.example.com/data/123', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ age: 21 }),
      credentials: 'include',
    });
    
    if (!response.ok) throw new Error(`status: ${response.status}`);
    const data = await response.json();
    console.log('PUT结果:', data);
  } catch (err) {
    console.error('PUT请求失败:', err);
  }
}

// 4. DELETE 请求
async function fetchDelete() {
  try {
    const response = await fetch('https://api.example.com/data/123', {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
      },
      credentials: 'include',
    });
    
    if (!response.ok) throw new Error(`status: ${response.status}`);
    const data = await response.json();
    console.log('DELETE结果:', data);
  } catch (err) {
    console.error('DELETE请求失败:', err);
  }
}

2. umijs request 实现四种请求

先安装依赖：

bash

运行

css 复制代码

npm install umi-request --save

javascript

运行

javascript 复制代码

import request from 'umi-request';

// 全局配置（一次配置，所有请求生效）
request.defaults.baseURL = 'https://api.example.com';
request.defaults.headers = { 'Content-Type': 'application/json' };
request.defaults.credentials = 'include'; // 全局携带cookie

// 1. GET 请求（自动序列化参数）
async function requestGet() {
  try {
    const data = await request.get('/data', {
      params: { id: '123', name: 'test' }, // 无需手动拼接URL
      timeout: 5000, // 内置超时控制
    });
    console.log('GET结果:', data);
  } catch (err) {
    // 自动捕获HTTP错误（404/500等），无需手动判断response.ok
    console.error('GET请求失败:', err);
  }
}

// 2. POST 请求（自动序列化JSON）
async function requestPost() {
  try {
    const data = await request.post('/data', {
      data: { name: 'test', age: 20 }, // 无需JSON.stringify
      timeout: 5000,
    });
    console.log('POST结果:', data);
  } catch (err) {
    console.error('POST请求失败:', err);
  }
}

// 3. PUT 请求
async function requestPut() {
  try {
    const data = await request.put('/data/123', {
      data: { age: 21 },
      timeout: 5000,
    });
    console.log('PUT结果:', data);
  } catch (err) {
    console.error('PUT请求失败:', err);
  }
}

// 4. DELETE 请求
async function requestDelete() {
  try {
    const data = await request.delete('/data/123', {
      timeout: 5000,
    });
    console.log('DELETE结果:', data);
  } catch (err) {
    console.error('DELETE请求失败:', err);
  }
}

// 额外能力：拦截器（umi-request 核心优势）
// 请求拦截器：统一添加token、修改请求参数
request.interceptors.request.use((url, options) => {
  return {
    url,
    options: { ...options, headers: { ...options.headers, token: 'xxx' } },
  };
});

// 响应拦截器：统一处理返回结果、错误码
request.interceptors.response.use((response) => {
  // 统一解析响应（无需每次await response.json()）
  return response.json().then(data => {
    if (data.code !== 200) {
      throw new Error(data.message);
    }
    return data;
  });
});

二、关键区别详解

维度	原生 fetch	umijs request
参数处理	GET 需手动拼接 URL，POST 需手动序列化	自动序列化 GET 参数、POST JSON 数据
错误处理	仅捕获网络错误，HTTP 错误（404/500）需手动判断 `response.ok`	自动捕获所有错误（网络 + HTTP），直接进入 catch
配置方式	每次请求需重复配置 headers/credentials	支持全局默认配置，减少重复代码
额外功能	无超时、拦截器、取消请求等能力	内置超时、拦截器、取消请求、请求缓存等
响应解析	需手动调用 `response.json()`/`response.text()`	自动解析 JSON，可自定义解析规则
兼容性	依赖浏览器支持（IE 完全不支持）	底层基于 fetch，可通过 polyfill 兼容
使用成本	高（需手写大量重复逻辑）	低（封装后开箱即用）

三、总结

核心定位 ：原生 fetch 是基础 API，仅满足最基本的请求需求；umijs request 是工程化封装库，解决了 fetch 的痛点（如手动错误处理、参数序列化）。
请求写法 ：四种请求（GET/POST/PUT/DELETE）在 umijs request 中更简洁，无需重复编写 headers、参数拼接、错误判断等逻辑。
扩展能力 ：umijs request 的拦截器、全局配置、超时控制等特性，更适合团队协作的中大型项目；原生 fetch 适合简单场景或需要高度自定义的需求。

如果你的项目是基于 umi 框架开发，优先使用 umi-request；如果是小型项目 / 纯原生开发，可直接用 fetch（但建议封装一层基础请求函数，减少重复代码）。