JS HTTP 请求终极解决方案 - fly.js

Fly.js

Fly.js 是一个功能强大的轻量级的javascript http请求库，同时支持浏览器和node环境，通过适配器，它可以运行在任何具有网络能力的javascript运行环境；同时fly.js有一些高级的玩法如全局ajax拦截、在web app中支持请求重定向等，耐心看下去，它会给你足够的惊喜。

接下来会出几篇文章深入的介绍fly.js的高级玩法。这是首篇，一个整体的介绍，如果您有兴趣可以去 fly官网了解更多。

简介

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

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

定位与目标

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

与axios和Fetch对比

详细的对比请参照flyio官网的文章 与axios和Fetch对比 。

安装

使用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
复制代码

例子

下面示例如无特殊说明，则在浏览器和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请求

fly.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))
复制代码

发送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((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 的一个实例，err有两个字段:

{
  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
})
复制代码

注：若单次配置和实例配置冲突，则会优先使用单次请求配置

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提供了快捷方法：

fly.put(url, data, options)
fly.delete(url,data,options)
fly.patch(url,data,options)
复制代码

fly.all([])

发起多个并发请求，参数是一个promise 数组；当所有请求都成功后才会调用then，只要有一个失败，就会调catch。

创建Fly实例

为方便使用，在引入flyio库之后，会创建一个默认实例，一般情况下大多数请求都是通过默认实例发出的，但在一些场景中需要多个实例（可能使用不同的配置请求），这时你可以手动new一个：

//npm、node环境下
var  Fly=require("flyio/dist/npm/fly") //注意！此时引入的是 "fio/dist/npm/fly"
var nFly=new Fly();

//CDN引入时直接new
var nFly=new Fly();
复制代码

Http Engine

Fly 引入了Http Engine 的概念，所谓 Http Engine，就是真正发起 http 请求的引擎，这在浏览器中一般都是XMLHttpRequest，而在 Node 环境中，可以用任何能发起网络请求的库／模块实现。Fly 可以自由更换底层 Http Engine 。事实上，Fly 正是通过更换 Http Engine 而实现同时支持浏览器环境和Node环境的 。不过，Http Engine 并不局限于Node 和 浏览器环境，也可以是 Android、ios、electron等，正是由于这些，Fly 才有了一个非常独特而强大的功能——请求重定向。基于请求重定向，我们可以实现一些非常有用的功能，比如将内嵌到 APP 的所有 http 请求重定向到 Native ，然后在端上( Android、ios )统一发起网络请求、进行 cookie 管理、证书校验等，详情请戳 Fly Http Engine

全局Ajax拦截

在浏览器中，可以通过用 Fly engine 替换 XMLHttpRequest 的方式拦截全局的的 Ajax 请求，无论上层使用的是何种网络库。

体积

在浏览器环境下，一个库的大小是非常重要的。这方面 Fly 做的很好，它在保持强大的功能的同时，将自己的身材控制到了最好。min 只有 4.6K 左右，GZIP 压缩后不到 2K，体积是 axios 的四分之一。

Finally

如果感觉 Fly 对您有用，欢迎 star 。 github: https://github.com/wendux/fly

补充一句

招前端，招前端，招前端！最近有找工作或者想换工作的加我微信Demons-du哦。 职位地点：北京