JS HTTP 请求终极解决方案 - 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哦。 职位地点：北京