SkillAgentSearch skills...

Fly

:rocket: Supporting request forwarding and Promise based HTTP client for all JavaScript runtimes.

GenerateConvertImprove

Install / Use

/learn @wendux/Fly
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

English|中文简体

fly.js

npm version build status coverage size platform

Fly.js

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

浏览器支持

| Chrome | Firefox | Safari | Opera | Edge | IE | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | | ✔ | ✔ | ✔ | ✔ | ✔ | > 8 |

其它支持的平台

<table> <tbody> <tr> <td align="center" valign="middle"> <a href="https://nodejs.org/"> <img src="https://github.com/wendux/fly/raw/master/imgs/node.png" alt="node logo"> </a> </td> <td align="center" valign="middle"> <a href="https://mp.weixin.qq.com/"> <img src="https://github.com/wendux/fly/raw/master/imgs/mp.png" alt="Mini Program logo"> </a> </td> <td align="center" valign="middle"> <a href="http://facebook.github.io/react-native/"> <img src="https://github.com/wendux/fly/raw/master/imgs/rn.png" alt="mpvue logo"> </a> </td> <td align="center" valign="middle"> <a href="http://weex.apache.org/"> <img src="https://github.com/wendux/fly/raw/master/imgs/weex.png" alt="weex logo"> </a> </td> <td align="center" valign="middle"> <a href="https://www.quickapp.cn/"> <img src="https://github.com/wendux/fly/raw/master/imgs/hp.png" alt="quick app logo"> </a> </td> <td align="center" valign="middle"> <a href="https://mini.open.alipay.com/channel/miniIndex.htm"> <img width="40" src="https://gw.alipayobjects.com/zos/rmsportal/kjenedafWxLSvoQqNxUF.png" alt="支付宝小程序"> 支付宝小程序 </a> </td> </tr> </tbody> </table>

目前Fly.js支持的平台包括：Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器，这些平台的 JavaScript 运行时都是不同的。更多的平台正在持续添加中，请保持关注。

简介

Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：

  1. 提供统一的 Promise API。
  2. 浏览器环境下，轻量且非常轻量 。
  3. 支持多种JavaScript 运行环境
  4. 支持请求／响应拦截器。
  5. 自动转换 JSON 数据。
  6. 支持切换底层 Http Engine，可轻松适配各种运行环境。
  7. 浏览器端支持全局Ajax拦截 。
  8. H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片。

定位与目标

Fly 的定位是成为 Javascript http请求的终极解决方案。也就是说，在任何能够执行 Javascript 的环境，只要具有访问网络的能力，Fly都能运行在其上，提供统一的API。

官网

详细的文档请移步：Flyio官网文档 。 官网http请求使用的正是fly，为了方便大家验证fly功能特性，官网对fly进行了全局引入，您可以在官网页面打开控制台直接验证。

English doc

安装

使用NPM

npm install flyio

使用CDN(浏览器中)

<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>

UMD（浏览器中）

https://unpkg.com/flyio/dist/umd/fly.umd.min.js

引入flyio

不同JavaScript运行时的入口文件不同 ，请查看文档后面相应平台的引入方式，但在浏览器、Node、React Native中引入的方式是一样的，下面是不同平台下的引入的方式：

  1. 浏览器、Node、React Native中引入

    //引入fly实例
var fly=require("flyio")

    上面方式引入的是Fly的默认实例（浏览器、Node、React Native中相同），你也可以自己创建Fly实例：

    // 浏览器和React Native
var Fly=require("flyio/dist/npm/fly")
// Node 入口
// var Fly=require("flyio/src/node")
var fly=new Fly;

  2. 在微信小程序中引入

    var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly

    如果您的微信小程序项目没有使用npm来管理依赖，您可以直接下载源码到您的小程序工程，下载链接wx.js 或 wx.umd.min.js .下载任意一个，保存到本地工程目录，假设在“lib”目录，接下来引入：

    var Fly=require("../lib/wx") //wx.js为您下载的源码文件
var fly=new Fly; //创建fly实例

  3. 在支付宝小程序中引入

    var Fly=require("flyio/dist/npm/ap") 
var fly=new Fly

    如果您的支付宝小程序项目没有使用npm来管理依赖，您可以直接下载源码到您的小程序工程，下载链接ap.js 或 ap.umd.min.js .下载任意一个，保存到本地工程目录，假设在“lib”目录，接下来引入：

    var Fly=require("../lib/ap") //ap.js为您下载的源码文件
var fly=new Fly; //创建fly实例

  4. 快应用中引入

    快应用 中Fly依赖 fetch模块，需要先在 manifest.json中添加引用：

      "features": [
     ...
    {"name": "system.fetch"}
  ]

    然后创建fly实例

     //依赖快应用中的fetch模块，需要在
 var fetch = require("@system.fetch")
 var Fly=require("flyio/dist/npm/hap")
 var fly=new Fly(fetch)

  5. Weex中引入

    var Fly=require("flyio/dist/npm/weex")
var fly=new Fly

引入之后，您就可以对fly实例进行全局配置、添加拦截器、发起网络请求了。

例子

下面示例如无特殊说明，则在所有支持的平台下都能执行。

发起GET请求

//通过用户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请求

fly.post('/user', {
    name: 'Doris',
    age: 24
    phone:"18513222525"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Post请求添加Url参数

fly.get("../package.json", "xxx=5", {
        params: {
            c: 1
        }
    }
)

最终的URL是“package.json?c=1&xxx=5”。

发起多个并发请求

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))

发送URLSearchParams

const 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((request)=>{
    //给所有请求添加自定义header
    request.headers["X-Tag"]="flyio";
  	//打印出请求体
  	console.log(request.body)
  	//终止请求
  	//var err=new Error("xxx")
  	//err.request=request
  	//return Promise.reject(new Error(""))
  
    //可以显式返回request, 也可以不返回，没有返回值时拦截器中默认返回request
    return request;
})

//添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
    (response) => {
        //只将请求结果的data字段返回
        return response.data
    },
    (err) => {
        //发生网络错误后会走到这里
        //return Promise.resolve("ssss")
    }
)

请求拦截器中的request对象结构如下：

{
  baseURL,  //请求的基地址
  body, //请求的参数
  headers, //自定义的请求头
  method, // 请求方法
  timeout, //本次请求的超时时间
  url, // 本次请求的地址
  params, //url get参数(post请求或默认的get参数)    
  withCredentials, //跨域请求是否发送第三方cookie
  ... //options中自定义的属性
}

响应拦截器中的response对象结构如下：

{
  data, //服务器返回的数据
  engine, //请求使用的http engine(见下面文档),浏览器中为本次请求的XMLHttpRequest对象
  headers, //响应头信息
  request  //本次响应对应的请求信息，即上面的request结构
}

移除拦截器

如果你想移除拦截器，只需要将拦截器设为null即可：

fly.interceptors.request.use(null)
fly.interceptors.response.use(null,null)

在拦截器中执行异步任务

现在，您可以在拦截器中执行异步任务了!

下面我们看一个例子：由于安全原因，我们需要所有的请求都需要在header中设置一个csrfToken，如果csrfToken不存在时，我们需要先请求一个csrfToken，然后再发起网络请求，由于请求csrfToken是异步的，所以我们需要在拦截器中执行异步请求，代码如下：

var csrfToken="";
var tokenFly=new Fly();
var fly=new Fly();
fly.interceptors.request.use(function (request) {
  log

wendux

View profile

View on GitHub
GitHub Stars3.9k
CategoryCustomer
Updated6h ago
Forks634
wendux/fly

Languages

JavaScript

Security Score

95/100

Audited on Mar 30, 2026

No findings