umi-request 和 umi 的区别是什么

文章目录

    • [umi-request 和 umi 的区别是什么](#umi-request 和 umi 的区别是什么)
    • [为什么 使用 umi-request 替换 umi](#为什么 使用 umi-request 替换 umi)

umi-request 和 umi 的区别是什么

为什么 使用 umi-request 替换 umi

umi-request 是一个基于 fetch 的网络请求库,专门为 Umi 开发的。相比于 Umi 内置的 request 模块,umi-request 提供了更多的功能和灵活性。

使用 umi-request 的主要原因可能包括以下几点:

更强大的功能:umi-request 提供了丰富的功能,如请求拦截器、响应拦截器、异常处理、请求重试等。这些功能可以帮助您更好地管理和处理网络请求。

更好的兼容性:umi-request 基于标准的 fetch API 实现,与现代浏览器兼容性更好。而内置的 request 模块可能在某些特定浏览器或环境中存在兼容性问题。

可扩展性:umi-request 提供了丰富的插件机制,可以轻松地添加自定义的中间件或拦截器,以满足特定的需求。

社区支持:umi-request 是一个独立的开源项目,拥有活跃的社区支持和维护。您可以从社区中获取更多的功能扩展、文档和帮助。

需要注意的是,使用 umi-request 取决于您的具体需求和偏好。如果您对 umi 内置的 request 模块感到满意并满足您的需求,那么您可以继续使用它。如果您需要更多的功能和灵活性,或者对 umi-request 的功能更感兴趣,那么可以考虑切换到 umi-request。

示例demo

bash 复制代码
// import { request } from 'umi';
import request from 'umi-request';

// request拦截器, 改变url 或 options.
request.interceptors.request.use((url, options) => {
  let token = localStorage.getItem('token');
  if (null === token) {
      token = '';
  }
  const authHeader = { Authorization: `Bearer ${token}` };
  return {
    url: url,
    options: { ...options, interceptors: true, headers: authHeader },
  };
});

通过 Umi Request 库来实现请求的拦截器。拦截器的作用是在每次请求发送之前,对请求的 URL 和选项进行修改或添加一些自定义的处理逻辑。

在这个例子中,拦截器的作用是为每个请求添加一个包含授权信息的请求头。具体来说,它从 localStorage 中获取存储的 token,并将其添加到请求头的 Authorization 字段中,用于进行身份验证。

这种实现的目的是为了实现全局的身份验证机制。通过在请求拦截器中添加授权信息,每个发送的请求都会自动附带授权头部,而无需在每个请求中手动添加授权信息。

这样的实现方式具有以下优点:

  • 方便:只需在请求拦截器中添加一次授权逻辑,即可自动为每个请求添加授权信息,无需在每个请求中重复添加。
  • 统一:确保每个请求都遵循相同的身份验证规则,提高代码的可维护性和一致性。
  • 安全:通过将授权信息存储在安全的方式(例如 localStorage)中,并将其添加到请求头中,提供了一种安全的方式进行身份验证。

通过在请求拦截器中添加授权信息,可以实现全局的身份验证,提高代码的可维护性和安全性。这种实现方式可以方便地适用于各种请求,并提供了一种统一的身份验证机制。

相关推荐
一叶茶2 天前
前端生成docx文档、excel表格、图片、pdf文件
前端·javascript·react
走,板砖去5 天前
大文件传输与断点续传实现(极简Demo: React+Node.js)
node.js·react
SRestia5 天前
Django+React---从0搭建一个听音乐+聊天室的网站
websocket·django·react
远洋录5 天前
前端部署实战:从人工发布到全自动化流程
前端·人工智能·react
Rudon滨海渔村7 天前
React-antd组件库 - 让Menu子菜单项水平排列 - 下拉菜单排序 - 自定义子菜单展示方式
前端·react.js·前端框架·react
远洋录8 天前
前端单元测试实战:从零开始构建可靠的测试体系
前端·人工智能·react
Krorainas9 天前
将PDF流使用 canvas 绘制然后转为图片展示在页面上(二)
前端·javascript·pdf·react
远洋录9 天前
前端性能优化实战:从加载到渲染的全链路提升
前端·人工智能·react
Krorainas11 天前
将PDF流使用 canvas 绘制展示在页面上(一)
前端·javascript·pdf·react
远洋录11 天前
状态管理实战:一次 Redux 到 React Query 的重构之旅
前端·人工智能·react