umi-request 获取数据流

最新推荐文章于 2025-03-07 10:24:22 发布

Lan Ju

最新推荐文章于 2025-03-07 10:24:22 发布

阅读量3.2k

点赞数

分类专栏： umi 文章标签：前端 javascript node.js reactjs es6

本文链接：https://blog.youkuaiyun.com/BLUE_JU/article/details/111913803

版权

本文介绍了在微前端项目中使用 umi-request 进行文件下载功能，即获取数据流的操作。关键点在于设置 responseType 为 blob，并展示了如何处理响应中的文件流。详细实践代码参考 GitHub 上的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首发于语雀文档

前言

微前端产品开发中使用到了 umi-request 这个，类似于 axios（但貌似又强于 axios），因为碰到文件下载的功能，也即是：获取数据流，记录一下。

其实最重要的两点无非是：

responseType 要设置成 blob

https://github.com/blueju/umi-request-practice/blob/4f11c63e7b47f730ed1bcdde867c6f4575241485/example/get-data-stream.jsx#L14

如何将响应结果中的文件流导出来

https://github.com/blueju/umi-request-practice/blob/4f11c63e7b47f730ed1bcdde867c6f4575241485/example/get-data-stream.jsx#L16

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lan Ju

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

umi-request 统一异常处理实践

LanJu的博客

12-28

5881

前言本人在工作中用到了 umi-request，百度谷歌搜了一遍，感觉都没找到超过 3 篇合适且含代码的文章，因此只能自行实践总结了。 umi-request 有点不同 umi-request 与 axios & xhr 不太一样，它是基于 fetch 实现的，因此它只有在网络错误的情况下，才会抛出错误（即：catch），即使接口返回的是 404/500 等错误。 umi-request 自带提供一个错误处理函数 errorHandler，所有在 umi-request 中执行的代码如果抛出错误

umi-request的具体使用案例

weixin_38122772的博客

05-19

1万+

放上参考文档: https://github.com/umijs/umi-request request.ts文件 import { extend } from 'umi-request'; import { notification, message } from 'antd'; import _omit from 'lodash/omit'; const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已

参与评论您还未登录，请先登录后发表或查看评论

umi-request 网络请求（基于React）

0.0 的博客

02-17

7513

Umi 内置了一个 umi-request 插件来实现网络请求。该插件内部是基于 fetch 进行封装的。我们在 umi 项目中，可以选择使用内置的 umi-request，也可以单独下载 axios。一、基本使用 import request from 'umi-request'; export const getPlayListAsync = () => request.get('http://localhost:3000/personalized'); 二、传参语法 1、get 请求 r

umi-request:基于获取的请求工具

05-02

English | umi请求网络请求库基于fetch封装，结合了fetch和axios的功能，为开发人员提供了统一的api调用方法，简化了用法，并提供了诸如缓存，超时，字符编码处理和错误处理之类的常用功能。支持的功能 url参数自动序列化发布数据提交方法得到简化响应返回处理简化 api超时支持 api请求缓存支持支持处理gbk 请求和响应拦截器支持，例如axios 统一错误处理中间件支持取消请求支持，例如axios 从node.js发出http请求 umi-revs vs提取vs axios 特征 umi请求拿来轴距执行浏览器本机支持浏览器本机支持 XMLHttpRequest 尺寸 9k 4k（polyfill） 14k 查询简化 :check_mark_button: :cross_mark: :check_mark_button: 简化后 :check_mark_button: :cross_mark: :cross_mark: 超时 :check_mark_button: :cross_mark: :c

React框架请求代理（以umi项目为例）

最新发布

z_y_j229970438的博客

03-07

205

3、在app.tsx中调用Request.tsx函数并暴露请求代理。1、在.umirc.ts文件里面配置proxy。2、在Request.tsx中配置下面的代码。下面是我的项目代码的目录结构。

umi-request 获取数据流（xlsx文件）

qq_32439563的博客

12-25

1868

umi-request 获取数据流（xlsx文件）

umi-request下载数据流

dergfg的博客

07-20

4053

/** * 获取数据流 */ import React from 'react'; import { Button } from 'antd'; import 'antd/dist/antd.css'; import request from 'umi-request'; export default () => { function download() { request('/get-data-stream', { method: 'POST', // 重

axios/fetch/umi-request response拦截获取data

iorn_mangg的博客

06-22

1946

request.interceptors.response.use(async(response,options)=>{ constdata=awaitresponse.clone().json(); })

umi-request 网络请求之路

qq_57756904的博客

10-30

1万+

umi-request 网络请求之路背景在做中台业务应用开发的过程中，我们发现在请求链路上存在以下问题：请求库各式各样，没有统一。每次新起应用都需要重复实现一套请求层逻辑，切换应用时需要重新学习请求库 API。各应用接口设计不一致、混乱。前后端同学每次需重新设计接口格式，前端同学在切换应用时需重新了解接口格式才能做业务开发。接口文档维护各式各样。有的在语雀（云端知识库）上，有的在 RAP （开源接口管理工具）上，有的靠阅读源码才能知道，无论是维护、mock 数据还是沟通都很浪费.....

React umi Ant Design常用导入、导出Excel文件方案

sinat_15625949的博客

11-11

2392

介绍项目中常用的导入导出Excel文件方法封装，希望各位多提意见和补充。一、导入文件 // 导入接口 import requestUpload from 'umi-request'; export async function importFile(params: any) { return requestUpload(`${globalData.url}/api/importFile`, { method: 'POST', ...params, }); } // 使

React 之umi框架项目搭建

perfectshao的博客

12-08

2067

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、创建项目文件夹二、在需要的文件夹下的终端输入三、选择需要生成的项目类型四、选择所需功能五、安装依赖六、运行前言 Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。手动搭建基础的Umi框架。一、创建项目文件夹可以直接在目录

REACT Umi根据后端返回二进制文件流，前端输出成XLSX文件，直接下载

qq_53699919的博客

03-22

2544

项目需求:需要将列表信息，前端直接下载成文件，接口后端返回的是二进制文件流，需要前端处理,返回的结果如下：

利用uni.request实现流式数据传输

m0_62343788的博客

01-01

6277

在小程序开发中，有时我们需要使用流式请求来传输数据。本文将介绍如何利用uni.request实现流式请求，以便在特殊场景下实现数据传输。

写流式输出接口给前端时，总是会一次性返回的坑

u011344131的博客

10-16

1898

现象就是本地怎么调试，都是正常的，明明前后端都指定了text/event-stream，接口返回的也没错，但上了服务器，就是会一次性返回。接口会pending很久，直到大模型返回了所有数据才一次性返回很多内容。要把这个开关关闭，否则nginx会等到buffer满了（所有请求完成）才返回。常规检查了一下，看了请求和返回的header，没问题，看了方法也是异步的。最近写了几个大模型的接口，用SseEmitter做流式输出，踩了个坑。直接结论就是nginx也需要做配置。查这破问题查了两天，糟心。

umi.request获取响应头headers里面的内容

tangxiaobao2016的博客

11-10

1169

下载excel,后端返回的excel的名称在content-disposition里

使用UmiJS封装请求umi-request

与世无争的垃圾

05-11

6222

根据umi-request文档做了一个极简单的封装，错误处理，中间件可以根据文档自行添加请求代理在.umirc.js中配置proxy // request.js import { extend } from "umi-request"; const errmsgMap = { } const HttpRequest = function ({url, method, params}) { let config = { method, // 请求方式

react+umi发送请求request初始配置及使用

weixin_48996679的博客

10-05

5686

我们用的是umi+react ,自带了封装好的request,使用起来很方便,只需要简单设置下就可以. 1.设置 // 请求token const getToken = async (url, forceLogin) => { const token = localStorage.getItem(`tokens`); if (!token || forceLogin) { if (REACT_ENV !== "production") { // 开发环境，自动登录

umi request post请求参数