【重点突破】—— umi-request 基于fetch的网络请求库（转）

最新推荐文章于 2024-08-17 21:25:59 发布
最新推荐文章于 2024-08-17 21:25:59 发布
阅读量1.5k 收藏 6
点赞数 1
文章标签： java python js javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34235864/article/details/123059746
版权
umi-request是为了解决中台业务应用开发中请求库不统一、接口设计混乱和文档维护不便等问题，提供统一API调用的HTTP请求库。它基于fetch，简化了请求处理，并包含了拦截器、中间件机制等特性。与fetch和axios相比，umi-request提供了更丰富的功能，如URL参数序列化、请求超时处理和取消请求等。它还支持快速配置，降低了开发者的使用门槛。
摘要由CSDN通过智能技术生成

背景

在做中台业务应用开发的过程中，我们发现在请求链路上存在以下问题：

  1. 请求库各式各样，没有统一。 每次新起应用都需要重复实现一套请求层逻辑，切换应用时需要重新学习请求库 API。
  2. 各应用接口设计不一致、混乱。 前后端同学每次需重新设计接口格式，前端同学在切换应用时需重新了解接口格式才能做业务开发。
  3. 接口文档维护各式各样。 有的在语雀(云端知识库)上，有的在 RAP (开源接口管理工具)上，有的靠阅读源码才能知道，无论是维护、mock 数据还是沟通都很浪费人力。

针对以上问题，我们提出了请求层治理，希望能通过统一请求库、规范请求接口设计规范、统一接口文档这三步，对请求链路的前中后三个阶段进行提效和规范， 从而减少开发者在接口设计、文档维护、请求层逻辑开发上花费的沟通和人力成本。其中，统一请求库作为底层技术支持，需要提前打好基地，为上层提供稳定、完善的功能支持，基于此，umi-request 应运而生。

umi-request

umi-request 是基于 fetch 封装的开源 http 请求库，旨在为开发者提供一个统一的 API 调用方式，同时简化使用方式，提供了请求层常用的功能：

  • URL 参数自动序列化
  • POST 数据提交方式简化
  • Response 返回处理简化
  • 请求超时处理
  • 请求缓存支持
  • GBK 编码处理
  • 统一的错误处理方式
  • 请求取消支持
  • Node 环境 http 请求
  • 拦截器机制
  • 洋葱中间件机制

与 fetch、axios 的异同？

umi-request 底层抛弃了设计粗糙、不符合关注分离的 XMLHttpRequest，选择了更加语义化、基于标准 Promise 实现

最低0.47元/天 解锁文章
柳柳Elena
关注
ky使用教程（基于fetch的小巧优雅js的http客服端）_ky axios(2)
2401_84166836的博客
04-17 978
它可以是任何的URL，无论是绝对的还是相对的，一个尾部斜线是个选项，可以被自动添加。如果是需要的，当它被添加到input里面，仅仅是input是字符串的时候才会产生影响，当使用该选项的时候这个input属性不能以斜线开头。当使用此选项来加强一致性并避免混淆如何处理输入URL时，不允许使用输入中的前导斜杠，因为在使用前缀URL时，输入不会遵循正常的URL解析规则，这会改变前导斜杠的含义。hooks函数是连续的，异步的。生成一个传入option对象的重写默认值新的ky实例，相比之下 in contrast，
基于FetchAPI封装的HTTPClientFetchHTTPClient.zip
07-19
一个基于 Fetch API 封装的 HTTP Client，可用于浏览器及其他兼容环境中，设计之初是为了ReactJS和ReactNative访问后端RestAPI使用。比其他基于Fetch API的封装优势在于，它的中间件机制支持对请求和应答进行异步处理。安装：npm install fetch-http-client --save使用：import FetchHttpClient, { json } from 'fetch-http-client'; // Create a new client object. const client = new FetchHttpClient('http://api.example.com/endpoint'); // Add access token client.addMiddleware(request => {   request.options.headers['X-Access-Token'] = 'secret'; }); // Add json support client.addMiddleware(json()); // Add Logging client.addMiddleware(request => response => {   console.log(request, response); }); // Fire request. client.get('test').then(response => console.log(response.jsonData)); // Path variables support. client.get('users/{id}', { uriParams: { id: 1 } }).then(response => console.log(response.jsonData));预处理异步请求的中间件示例，从存储中异步读取accessToken，并添加到请求头中：// Add access token asynchronously client.addMiddleware(request => {   return AsynchronousStorage.fetch('accessToken').then(token => {     request.options.headers['X-Access-Token'] = token;     return request;   }); }); 标签：Fetch
ant design pro umi-request请求库，前端多环境部署
最新发布
weixin_44244934的博客
08-17 101
全局请求类 plugin下面的globalRequest。做额外配置 使用prefix指定请求的前缀。
【轮子】rf -- 一个基于 Fetch 的请求库
weixin_34346099的博客
10-12 282
rf -- request base on Fetch，就是一个基于 Fetch 的请求库。 现在，浏览器的发展使得我们可以使用 es 的一些新特性，而无需考虑到兼容性的问题。比如 promise，之前还是需要引用 polyfill 才行，但现在基本上每个浏览器都已经支持了。这使得我们可以写更少更简洁的代码。 在之前，发送 ajax 请求时，我们会对 XMLHTTPRequest 进行一层封装，使...
Fluent Fetcher: 重构基于 Fetch 的 JavaScript 网络请求库
weixin_34346099的博客
06-30 176
Fluent Fetcher: 重构基于 Fetch 的 JavaScript 网络请求库从属于笔者的 Web 开发基础与工程实践系列文章与项目，记述了笔者对内部使用的 Fetch 封装库的设计重构与实现过程。 Fluent Fetcher: 重构基于 Fetch 的 JavaScript 网络请求库 源代码地址：这里 在第一版本的 F...
推荐一个强大的Fetch Polyfill库 - Yetch
gitblog_00090的博客
06-05 391
推荐一个强大的Fetch Polyfill库 - Yetch yetchYet-another-fetch polyfill library. Supports AbortController/AbortSignal项目地址:https://gitcode.com/gh_mirrors/ye/yetch 如果你在开发跨浏览器应用时遇到了fetch功能的兼容性问题，那么Yetch可能正是你需要的解...
推荐跨平台的fetch库——cross-fetch
gitblog_00006的博客
05-13 622
推荐跨平台的fetch库——cross-fetch cross-fetchUniversal WHATWG Fetch API for Node, Browsers and React Native.项目地址:https://gitcode.com/gh_mirrors/cr/cross-fetch cross-fetch 是一款强大的跨平台Fetch API实现，无论您在浏览器环境、Node....
【金融大屏项目】—— umi-request配置通用请求处理
柳柳66的博客
02-21 1919
前言：目前没有发现有vue项目中使用umi-request的例子，用这个请求库的多为react项目，umi本身和dva也都是react周边的工具。 utils/request.js：配置通用请求中的异常处理和默认参数 /** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */ import ...
umi-request
个人笔记
04-09 1648
umi-request -> 网络请求库, 用于请求后端数据的插件库
umi-request 请求统一处理
qq_41373731的博客
04-15 4124
umi-request 请求统一处理全部代码异常处理程序配置request请求时的默认参数request请求拦截器, 改变url 或 optionsrequest响应拦截器, 统一处理错误信息 更详细的 api 文档：umi-request 全部代码 /** Request 网络请求工具 更详细的 api 文档: https://github.com/umijs/umi-request */ import { extend } from 'umi-request'; import { notificati
Ant Design Pro 网络请求，视图绑定model并且渲染到页面 umi-request
a_靖的博客
11-20 4592
封装网络请求，在service中新建接口，在model调用service，在视图绑定model并且得到网络请求的回调函数，获取网络请求的数据渲染到页面。 网络请求数据走向； 1.在utils/request.js 封装网络请求； /** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */...
umi-request 网络请求之路
热门推荐
qq_57756904的博客
10-30 1万+
umi-request 网络请求之路 背景 在做中台业务应用开发的过程中，我们发现在请求链路上存在以下问题： 请求库各式各样，没有统一。每次新起应用都需要重复实现一套请求层逻辑，切换应用时需要重新学习请求库 API。 各应用接口设计不一致、混乱。前后端同学每次需重新设计接口格式，前端同学在切换应用时需重新了解接口格式才能做业务开发。 接口文档维护各式各样。有的在语雀（云端知识库）上，有的在 RAP （开源接口管理工具）上，有的靠阅读源码才能知道，无论是维护、mock 数据还是沟通都很浪费.....
ajax&axios / fetch&umi-request知识点
acm_cn1234567890的博客
10-14 1423
http请求报文、http响应报文 Api分类: XHR对象 Ajax封装:Ajax技术的核心是XMLHttpRequest对象(简称XHR) axios----前端最流行的ajax请求库 axios二次封装（ajax封装一次，axios对ajax再进行封装）
FETCH中的基础语法以及封装自己的Ajax库
smile_team的博客
09-09 379
FETCH中的基础语法 注意：Fetch不是ajax，它是为了代替AJAX，是JS中内置的API，基于FETCH可以实现客户端和服务端的信息通信 FETCH是ES2018规范中新增的API，所以浏览器的支持度不是特别好（可以基于BABEL的最新语法解析包，把它进行解析），想要兼容性好一些，需要使用“Fetch polywill” 使用Fetch发送请求 fetch('/url',{ method:'GET', //设置请求头 h
umi-request全局响应拦截器
大白的Java之旅
08-01 1346
umi-request全局响应拦截器
axios/fetch/umi-request response拦截获取data
iorn_mangg的博客
06-22 1915
request.interceptors.response.use(async(response,options)=>{ constdata=awaitresponse.clone().json(); })
fetch设置timeout
Loser的专栏
02-20 5615
让fetch也可以timeout 原生的HTML5 API fetch并不支持timeout属性，习惯了jQuery的ajax配置的同学，如果一时在fetch找不到配置timeout的地方，也许会很纠结。fetch 的配置 API 如下： 语法 fetch(input, init).then(function(response) { ... }); 参数
探索Vercel Fetch：新一代的网络请求库
gitblog_00045的博客
04-16 293
探索Vercel Fetch：新一代的网络请求库 去发现同类优质开源项目:https://gitcode.com/ 是一个现代化的、基于标准的网络请求库，它是对原生window.fetch API的一次优化和扩展。本文将深入解析Fetch项目的背景、技术特性、应用场景及优势，帮助开发者更好地理解和利用这一强大的工具。 项目简介 Vercel Fetch旨在提供一个与浏览器内置的fetch API兼...
Vue Vue 中的fetch与网络请求第三方库axios
SillyBoy的博客
06-29 433
文章目录fetchaxios fetch 因为XMLHttpRequest配置和调用方法非常混乱，而且基于事件的异步模型书写不友好。 浏览器自带。 兼容不好：兼容包https://github.com/camsong/fetch-ie8 fetch请求默认不带cookie,需要设置fetch(url,{credntials:‘include’}) //text.json { 'name':'silly', 'age':'20', "location":"zhengzhou" }
umi-request row/text 请求里是什么格式
05-01
umi-request中的row/text请求是一种以文本格式传输数据的请求。文本格式一般指的是ASCII字符、数字、符号等按照规定的编码方式进行编码后的数据。在umi-request中，row/text请求可用于向服务器发送包含普通文本、JSON格式字符串等数据的请求。通过发送row/text请求，我们可以将数据传输到服务器并获取服务器返回的数据，实现前后端之间的数据交互。在row/text请求中，数据传输的方式通常使用HTTP协议或HTTPS协议，数据传输的过程需要进行编码和解码等处理，确保数据能够准确地传输和解析。通过umi-request中的row/text请求，我们可以方便地实现前后端之间的数据传输和交互，从而实现数据的动态更新和展示，提升应用的使用体验和交互性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值