Javascript http请求的终极解决方案Flyjs
来源:互联网 发布:centos 默认启动kde 编辑:程序博客网 时间:2024/06/06 03:59
简介
Fly.js 是一个基于 promise 的,轻量且强大的Javascript http 网络库,它有如下特点:
提供统一的 Promise API。
支持浏览器环境,轻量且非常轻量 。
支持 Node 环境。
支持请求/响应拦截器。
自动转换 JSON 数据。
支持切换底层 Http Engine,可轻松适配各种运行环境。
浏览器端支持全局Ajax拦截 。
H5页面内嵌到原生 APP 中时,支持将 http 请求转发到 Native。支持直接请求图片。
高度可定制、可拆卸、可拼装。
定位与目标
Fly 的定位是成为 Javascript http请求的终极解决方案。也就是说,在任何能够执行 Javascript 的环境,只要具有访问网络的能力,Fly都能运行在其上,提供统一的API。
官网
详细的文档请移步:https://wendux.github.io/dist/#/doc/flyio/readme 。 官网http请求使用的正是fly,为了方便大家验证fly功能特性,官网对fly进行了全局引入,您可以在官网页面打开控制台直接验证。
安装
使用NPM
npm install flyio
使用CDN
UMD
https://unpkg.com/flyio/dist/fly.umd.min.js
例子
下面示例如无特殊说明,则在浏览器和node环境下都能执行。
发起GET请求
var fly=require("flyio")//通过用户id获取信息,参数直接写在url中fly.get('/user?id=133') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });//query参数通过对象传递fly.get('/user', { id: 133 }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
发起POST请求
f
ly.post('/user', { name: 'Doris', age: 24 phone:"18513222525" }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
发起多个并发请求
function getUserRecords() { return fly.get('/user/133/records');}function getUserProjects() { return fly.get('/user/133/projects');}fly.all([getUserRecords(), getUserProjects()]) .then(fly.spread(function (records, projects) { //两个请求都完成 })) .catch(function(error){ console.log(error) })
直接通过 request 接口发起请求
//直接调用request函数发起post请求fly.request("/test",{hh:5},{ method:"post", timeout:5000 //超时设置为5s }).then(d=>{ console.log("request result:",d)}).catch((e) => console.log("error", e))发送URLSearchParamsconst params = new URLSearchParams();params.append('a', 1);fly.post("",params).then(d=>{ console.log("request result:",d)})
注:Node环境不存在URLSearchParams。各个浏览器对URLSearchParams的支持程度也不同,使用时务必注意
发送 FormData
var formData = new FormData(); var log=console.log formData.append('username', 'Chris'); fly.post("../package.json",formData).then(log).catch(log)
注:Fly目前只在支持 FormData 的浏览器环境中支持 FormData,Node环境下对 FormData 的支持方式稍有不同,详情戳这里 Node 下增强的API
请求二进制数据
fly.get(“/Fly/v.png”,null,{
responseType:”arraybuffer”
}).then(d=>{
//d.data 为ArrayBuffer实例
})
注:在浏览器中时 responseType 值可为 “arraybuffer” 或”blob”之一。在node下只需设为 “stream”即可。
拦截器
Fly支持请求/响应拦截器,可以通过它在请求发起之前和收到响应数据之后做一些预处理。
//添加请求拦截器fly.interceptors.request.use((config,promise)=>{ //给所有请求添加自定义header config.headers["X-Tag"]="flyio"; //可以通过promise.reject/resolve直接中止请求 //promise.resolve("fake data") return config;})
//添加响应拦截器,响应拦截器会在then/catch处理之前执行fly.interceptors.response.use( (response,promise) => { //只将请求结果的data字段返回 return response.data }, (err,promise) => { //发生网络错误后会走到这里 //promise.resolve("ssss") })如果你想移除拦截器,只需要将拦截器设为null即可:fly.interceptors.request.use(null)fly.interceptors.response.use(null,null)
Node
无论是在浏览器环境,还是在 Node 环境,Fly在上层提供了统一的 Promise API。这意味着无论您是 web 开发还是 node 开发,您都可以以相同的调用方式来发起http请求。不过,由于node和浏览器环境本身的差异,在Node环境下,Fly除了支持基本的API之外,还提供了一些增强的API,这些 API 主要涉及文件下载、多文件上传、http代理等众多强大的功能,详情请参考 Node下增强的API
错误处理
*请求失败之后,catch 捕获到的 err 为 Error 的一个实例,有两个字段
{
message:”Not Find 404”, //错误消息
status:404 //如果服务器可通,则为http请求状态码。网络异常时为0,网络超时为1
}
错误码*
*错误码 含义
0 网络错误
1 请求超时
2 文件下载成功,但保存失败,此错误只出现node环境下
=200 http请求状态码
请求配置选项
可配置选项:*
{ headers:{}, //http请求头, baseURL:"", //请求基地址 timeout:0,//超时时间,为0时则无超时限制 withCredentials:false //跨域时是否发送cookie}
配置支持实例级配置和单次请求配置
实例级配置
*实例级配置可用于当前Fly实例发起的所有请求
//定义公共headers
fly.config.headers={xx:5,bb:6,dd:7}
//设置超时
fly.config.timeout=10000;
//设置请求基地址
fly.config.baseURL=”https://wendux.github.io/”
单次请求配置*
*需要对单次请求配置时,需使用request方法,配置只对当次请求有效。
fly.request(“/test”,{hh:5},{
method:”post”,
timeout:5000 //超时设置为5s
})
注:若单次配置和实例配置冲突,则会优先使用单次请求配置
详细的配置请参考 Fly请求配置 。*
API
fly.get(url, data, options)
*发起 get 请求,url请求地址,data为请求数据,在浏览器环境下类型可以是:
String|Json|Object|Array|Blob|ArrayBuffer|FormData
options为请求配置项。
fly.post(url, data, options)
发起post请求,参数含义同fly.get。
fly.request(url, data, options)*
*发起请求,参数含义同上,在使用此API时需要指定options 的method:
//GET请求
fly.request(“/user/8” null, {method:”get”})
//DELETE 请求
fly.request(“/user/8/delete”, null, {method:”delete”})
//PUT请求
fly.request(“/user/register”, {name:”doris”}, {method:”PUT”})
……
request 适合在 RESTful API 的场景下使用。
fly.all([])
发起多个并发请求,参数是一个promise 数组;当所有请求都成功后才会调用then,只要有一个失败,就会调 catch。*
创建Fly实例
为方便使用,在引入flyio库之后,会创建一个默认实例,一般情况下大多数请求都是通过默认实例发出的,但在一些场景中需要多个实例(可能使用不同的配置请求),这时你可以手动new一个:
//npm、node环境下var Fly=require("flyio/dist/fly") //注意!此时引入的是 "flyio/dist/fly"var nFly=new Fly();//CDN引入时直接newvar nFly=new Fly();Http engine
Fly 引入了Http engine 的概念,所谓 Http engine,就是真正发起http请求的引擎,这在浏览器中一般都是XMLHttpRequest,而在 node 环境中,可以用任何能发起网络请求的库/模块实现,Fly 可以自由更换底层 http engine ,Fly 正是通过更换 engine 而实现同时支持 node 和 browser 。值得注意的是,http engine 不局限于node 和 browser 环境中,也可以是 android、ios、electron,正是由于这些,Fly 才有了一个非常强大的功能——请求重定向。基于请求重定向,我们可以实现一些非常有用的功能,比如将内嵌到 APP 的所有 http 请求重定向到 Native ,然后在端上( android、ios )统一发起网络请求、进行 cookie 管理、证书校验。详情请戳 Fly Http Engine
全局Ajax拦截
*在浏览器中,可以通过用 Fly engine 替换 XMLHttpRequest 的方式拦截全局的的 Ajax 请求,无论上层使用的是何种网络库。详细的内容请参考 Fly拦截全局Ajax
体积
在浏览器环境下,一个库的大小是非常重要的。这方面 Fly 做的很好,它在保持强大的功能的同时,将自己的身材控制到了最好。min 只有 4.6K 左右,GZIP 压缩后不到 2K,体积是 axios 的四分之一*。
- Javascript http请求的终极解决方案Flyjs
- JS HTTP 请求终极解决方案
- JS HTTP 请求终极解决方案
- javascript onmouseout问题终极解决方案
- javascript 深度递归引起的堆栈溢出,终极解决方案
- iOS9 HTTP网络请求不成功的解决方案
- win2003 iis6 的"请求的资源在使用中"(无法运行ASP程序)终极解决方案
- javascript 发送http请求
- http 请求 response 417 解决方案
- 【解决方案】Http请求报错
- MySql乱码的终极解决方案
- 汉字乱码的终极解决方案
- 终端乱码的终极解决方案
- UI开发的终极解决方案
- UI开发的终极解决方案
- 手机掉水里的终极解决方案!
- android switch 的终极解决方案
- http请求被浏览器abort的原因定位和解决方案
- 利用pybombs安装最新源码软件,包括gnuradio, uhd, hackrf, limesuite, gqrx, 以及各种gnuradio模块.
- maven工程的mapper文件不发布发到target目录下的问题
- 这样找回回收站误删文件,非常靠谱!
- 《Java专栏》— JVM 内存机制
- Linux更改文件属性权限
- Javascript http请求的终极解决方案Flyjs
- Docker容器技术介绍(六)--- 端口映射和容器间互访问
- linux tomcat service 方式启动脚本
- idea在autowired时出现编译红线 !Strings.isNullOrEmpty(planname)
- Linux系统自动化安装,dhcp服务配置
- 以后请每天做一个codewars好吗。
- Maven学习---笔记 (未完)
- 通过MySQL中元数据信息删除Hive中的表
- 4个让Docker和Kubernetes更安全的容器安全工具