开源跨平台的http请求解决方案——Fly.js

JavaScript/前端
432
0
0
2022-04-14
标签   JavaScript库

官网介绍

https://wendux.github.io/dist/#/doc/flyio/readme

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。其兼容性是它一大优势。

开源跨平台的http请求解决方案——Fly.js

浏览器兼容性

开源跨平台的http请求解决方案——Fly.js

其它平台

目前Fly.js支持的平台包括:Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器。不过官方文档中已经说明,更多平台正在持续加入,后续肯定会支持更多的平台。

安装和使用

安装方式和普通的js差不多

  • npm包安装
npm install flyio
  • 浏览器引入
<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
  • 浏览器端使用方式(其它环境请参考官网文档)
//index.html
<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
 <script> 
 let fly = new Fly();
 fly.get('./data.json').then(res => {
 console.log(res);
 }).catch(function (error) {
 console.log(error);
 });
</script>
//data.json
{
 "weatherinfo": {
 "city": "北京",
 "cityid": "101010100",
 "temp": "27.9",
 "WD": "南风",
 "WS": "小于3级",
 "SD": "28%",
 "AP": "1002hPa",
 "njd": "暂无实况",
 "WSE": "<3",
 "time": "17:55",
 "sm": "2.1",
 "isRadar": "1",
 "Radar": "JC_RADAR_AZ9010_JB"
 }
}

查看浏览器返回的结果

开源跨平台的http请求解决方案——Fly.js

使用

  • get请求
fly.get(url, data, options)//option是请求配置项
  • post请求
fly.post(url, data, options)//option是请求配置项
  • request
fly.request(url, data, options)//option是请求配置项
  • request结构对象
{
 headers:{}, //http请求头,
 baseURL:"", //请求基地址
 timeout:0,//超时时间,为0时则无超时限制 
 //是否自动将Content-Type为“application/json”的响应数据转化为JSON对象,默认为true
 parseJson:true,
 withCredentials:false //跨域时是否发送cookie
}

示例:

//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"})
  • response对象结构
{
 data, //服务器返回的数据
 engine, //请求使用的http engine(见下面文档),浏览器中为本次请求的XMLHttpRequest对象
 headers, //响应头信息
 request //本次响应对应的请求信息
}
  • 别名方法
fly.put(url, data, options)
fly.delete(url,data,options)
fly.patch(url,data,options)
fly.all([])
fly.spread([])

还有更多用法请直接参考官方文档

对比axios和fetch

开源跨平台的http请求解决方案——Fly.js

开源跨平台的http请求解决方案——Fly.js

官网有更详细的的介绍,大家可以直接参考官网。

备注

  • fly不支持jsonp
  • fly只能设置并维护一个拦截器
  • 可以清除拦截器
  • 不支持请求取消
  • 支持请求重定向

总结

flyJS是一个http请求的终极的解决方案,Fly最大的特点就是在混合APP中支持请求转发,而axios不支持,fly采用分层的思想,通过替换底层http engine(Fly中提出了Http Engine的概念)的方式实现各种环境的适配。能够实现很多高级的玩法。