前端请求库对比

[leohxj]

前端提到网络请求通常是指浏览器，但现在随着 Node.js、小程序的出现，网络请求不再局限于浏览器。

实现原理

浏览器端

基于 XHR 或 Fetch 实现。

node.js

基于node自带的 ttp/https/http2 模块实现 http 请求。

其他

比如各种小程序，比如微信的 wx.request, 支付宝的 my.httpRequest. 都是自己封装的请求模块。

如何抹平调用一致性

最常见的场景就是同构模块，建议将实际发送请求的模块做封装，依据不同环境做实例化。对不同环境提供不同的入口文件，通过打包工具自动载入（基于 package.json 的 browser/main 字段）或自行引入指定文件。

请求库对比

库	特点	基于 Fetch	支持 Promise	支持环境	兼容性
axios	- 请求可取消 - 可设置超时 - 支持 CSRF	:x:	:white_check_mark:	browser/Node.js	ie 11+
umi-request	- url 参数自动序列化 - post 数据提交方式简化 - response 返回处理简化 - api 超时支持 - api 请求缓存支持 - 支持处理 gbk 类 axios 的 request 和 response 拦截器(interceptors)支持 - 统一的错误处理方式	:white_check_mark:	:white_check_mark:		依赖 whatwg-fetch
fly.js	- 提供统一的 Promise API。 - 浏览器环境下，轻量且非常轻量 。 - 支持多种JavaScript 运行环境 - 支持请求／响应拦截器。 - 自动转换 JSON 数据。 - 支持切换底层 Http Engine，可轻松适配各种运行环境。 - 浏览器端支持全局Ajax拦截 。 - H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片。	:x:	:white_check_mark:	broswer/Node.js/小程序	> ie8
Superagent	支持插件概念			browser/Node.js	Node: v6.x+ - ie9+
request	- 文件支持流式读取 - 支持 Form 数据格式 - 自定义 http header			Node.js
r2	- request 作者基于 fetch 开发的	:white_check_mark:	:white_check_mark:		基于 whatwg-fetch
isomorphic-fetch	- 只是封装了两个 fetch 库？？？	:white_check_mark:	:white_check_mark:	browser/Node.js	whatwg-fetch - node-fetch
got	作者觉得觉得 request 太臃肿了 - 支持取消请求 - 支持缓存	❌	✅	Node.js
ky	Simpler API - Method shortcuts (ky.post()) - Treats non-2xx status codes as errors - Retries failed requests - JSON option - Timeout support - URL prefix option - Instances with custom defaults - Hooks	✅	✅	Broswer	whatwg-fetch

基于 RxJS

还有一部分请求库，返回的不是 Promise 对象，而是 Observable 对象， 基于 RxJS 做的封装。

• rx-http-request
• rxhttp
• angular/http
• https://rxjs.dev/api/ajax/ajax

参考

• Best of JS: Http client
• Comparing JavaScript HTTP Requests Libraries for 2019
• AJAX/HTTP Library Comparison
• 一篇文章让你学会如何选择 JS HTTP 请求库

[stonexer]

这个库不搞出来简直对不起你

[leohxj]

补下知识而已，学习学习

[leohxj]

添加几个带中间件概念的库：

• so-fetch: 区分了 request/response 的 interceptor

  • 中间件示例
  • 关键源码
  • 结合 reduce 方式，中间件方法返回的是个对象
  • 通过返回 参数作为下一个的入参 {}， 通过 imuuteable 的形式返回新对象

• umi-request: 也是通过返回对象实现

  • 中间件示例
  • 关键源码: 用 forEach 依次调用，实现的不优雅。

• vue-resource: middleware 定义的时候， 通过 return 区分哪些对 req 的操作，哪些对 res 的操作。

  • 中间件示例:
  • request 的操作，只修改, 参数为 request
  • return 部分作为对 response 的操作, 参数为 response
  • 关键源码: reqHandlers 注意这段代码，也是用到了 中间件依次调用的方式。初始的 reqHeandler 就是 对象的请求对象。从数组后面依次执行。如果 handler 返回的是函数，将它放入到 response 的 Handler 中，后续执行。
  • 利用 whill 循环，对数组 pop 操作，然后重新赋值的方式
  • request 的处理，就是通过对引用的修改，而不是 immutable 的方式返回新对象。

• intereq: 区分三类拦截器, onRequest, onResponse, onError

  • 中间件示例
  • 关键源码
  • 三者参数都不同
  • 这玩意不支持多个拦截器。。。差评

• frest: 也是分三类拦截器

  • 中间件示例
  • 关键源码: 中间件返回对象的形式，中间件用对象存储的，执行顺序可能有问题。原理和 umi-request 有点像
  • 文件中添加、删除中间件写的挺好，但是没有实现， 可以看 test 文件， 是直接操作了 interceptors.request.use 方法添加的函数，中间件管理里面有个 handles 对象获取这个数组。

• apollo-fetch

• 区分了 request, reponse 的修改。middleware vs afterware

• wretch： 类似 Koa 的中间件，通过 next 触发下一个调用, 概念叫中间件

  • 中间件示例
  • return next 的调用。和 reduce 也结合了。。
  • 关键代码: 第一个对象就是 Fetch, 然后参数是 (url, finalOptions), 中间件就是在他们直接调用的中间，拦截了参数，依次用中间件执行前一个中间件对象，形成新的 next 对象， 最后去触发参数，参数会依次被中间件处理。中间件里面会触发 next(url, options) 方法。
  • 中间件中通过 return next(url, opts).then 对响应做修改。

• fetch-plus：类似 koa 支持异常中间件写法 好好研究

  • 中间件示例： 这就和 koa 很像了。

  • 关键源码: 借助 koa-compose , 内部维护了一个 middlewares 数组。通过 use 添加中间件

  • 通过 compose 组合 middlewares 和内置带一个 fetchMiddleware

  • 将中间件通过 composeMiddleware(context) 触发。

  • 借助 koa-compose 使得中间件定义接受的参数可以为 (context, next),