88bifa必发唯一官网 1

88bifa必发唯一官网支持快应用的http互联网库,HTTP央浼终极建设方案

88bifa必发唯一官网 1quick.png

Fly.js 是多少个功能庞大的轻量级的javascript
http诉求库,同期支持浏览器和node情状,通过适配器,它能够运作在其他具备网络才干的javascript运营条件;同有的时候间fly.js有部分高级的游戏的方法如全局ajax拦截、在web
app中扶助诉求重定向等,耐心看下来,它会给您丰富的悲喜。

Fly.js
贰个基于Promise的、强大的、协理四种JavaScript运营时的http央浼库.
有了它,您能够使用一份http央浼代码在浏览器、微信小程序、Weex、Node、React
Native、快应用中都能不荒谬运维。同有时间能够一本万利合作主流前端框架
,最大可能的完结 Write Once Run
Everywhere
。本文首要介绍一下怎么样在快应用中使用flyio。

接下去会出几篇小说浓密的牵线fly.js的高等玩的方法。那是首篇,三个完好的牵线,假如你有意思味能够去
fly官网精通愈来愈多。

Github:

简介

Fly.js 是一个基于 promise 的,轻量且壮大的 Javascript http
网络库,它有如下特征:

  1. 提供统一的 Promise API。
  2. 支撑浏览器碰着,轻量且极度轻量
  3. 支持 Node 环境。
  4. 援救央浼/响应拦截器。
  5. 电动调换 JSON 数据。
  6. 支撑切换底层 Http Engine,可轻巧适配各个运营条件
  7. 浏览器端支持全局Ajax拦截 。
  8. H5页面内嵌到原生 应用程式 中时,协理将 http 诉求转载到
    Native。帮助直接呼吁图片
  9. 惊人可定制、可拆卸、可拼装。

快应用是九大手提式有线电话机商家基于硬件平台联结推出的风靡应用生态。客商不须要下载安装,即点即用,享受原生应用的性质体验。快应用使用web开荒技艺栈,使用JavaScript语言开采,flyio官方在第不常间辅助了快应用。具体行使参照下边文书档案。

固定与对象

Fly 的固化是形成 Javascript
http哀告的终点设计方案。也正是说,在任何能够实践 Javascript
的情形,只要具有访谈互连网的技术,Fly都能运作在其上,提供联合的API。

标准的API

Fly在上层提供了一套规范的API,那样,您就足以在相继JavaScript境遇中,以同一的议程倡导互联网央浼,不一致平台对应贰个平台相关的adapter,将阳台差距在底层屏蔽,使用时分化平台只需求引进flyio
npm包中相应平台的进口文件就能够,也正是因为那样,fly在各种平台下都能够确定保证轻量。

同一时候,为了方便axios使用者迁移,fly.js API设计风格和axios相似!

Fly.js 通过在差别 JavaScript 运维时经过在底层切换分化的 Http
Engine来促成多境遇扶助,但同时对顾客层提供统一、规范的Promise
API。不仅仅如此,Fly.js还扶助乞请/响应拦截器、自动转载JSON、央求转载等功能,详细的情况请参照他事他说加以考察:

与axios和Fetch对比

详尽的相持统一请参照flyio官方网址的稿子
与axios和Fetch对比

已支持的平台

时下Fly.js帮忙的阳台包涵:Node.js 、微信小程序 、Weex、React Native
、Quick App 和浏览器,那一个平台的 JavaScript
运维时都是例外的。更加多的平台正在不停增添中,请保持关心。

安装

快应用中引进

在 快应用 中使用,快应用中凭仗 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 

接下去,您就足以应用fly了!上边示比如无特殊表达,则在颇有帮衬的阳台下都能施行。

//通过用户id获取信息,参数直接写在url中fly.get('/user?id=133') .then(function  { console.log; }) .catch(function  { console.log; });//query参数通过对象传递fly.get('/user', { id: 133 }) .then(function  { console.log; }) .catch(function  { console.log;

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

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{ console.log

Fly配置协助实例级配置单次央浼配置,
实例级配置可用来当前Fly实例发起的富有要求, 如:

//定义公共headersfly.config.headers={xx:5,bb:6,dd:7}//设置超时fly.config.timeout=10000;//设置请求基地址fly.config.baseURL="https://wendux.github.io/"

单次诉求配置只对当次央求有效:

fly.request("/test",{hh:5},{ method:"post", timeout:5000 //本次请求超时设置为5s})

Fly协助须求/响应拦截器,能够通过它在央浼发起以前和吸收接纳响应数据之后做一些预管理。

//添加请求拦截器fly.interceptors.request.use=>{ //给所有请求添加自定义header request.headers["X-Tag"]="flyio"; //打印出请求体 console.log(request.body) //终止请求 //var err=new Error //err.request=request //return Promise.reject(new Error //可以显式返回request, 也可以不返回,没有返回值时拦截器中默认返回request return request;})//添加响应拦截器,响应拦截器会在then/catch处理之前执行fly.interceptors.response.use(  => { //只将请求结果的data字段返回 return response.data },  => { //发生网络错误后会走到这里 //return Promise.resolve })

除过以上那一个应用,Fly.js 还会有为数不菲别的庞大的效率,详细情形请移步Fly.js.

使用NPM

npm install flyio

将Fly挂在app实例上

将Fly挂在app实例上后,您就能够在全局方便使用,这只是一种推荐做法,您完全可以不那样做:

 var fetch = require("@system.fetch") var Fly=require("flyio/dist/npm/hap") var fly=new Fly fly.config.baseURL = 'http://www.dtworkroom.com/doris/1/2.0.0/' export default { showMenu: util.showMenu, createShortcut: util.createShortcut, onCreate(){ this.$http=fly; } }

然后,您就足以在享有页面中采取:

this.$app.$http.post.then=>{ this.data=d.data; //console.log(JSON.stringify

如果你有标题迎接在 在github 提issue . fly.js github:

使用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境遇一纸空文URAV4LSearchParams。各样浏览器对UENCORELSearchParams的帮衬程度也不及,使用时必需注意

发送 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.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
才有了三个这一个例外而壮大的魔法——恳请重定向。基于央浼重定向,咱们可以完毕部分非常管用的作用,比方将内嵌到
应用程式 的享有 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

补偿一句

招前端,招前端,招前端!最近有找职业也许想换专门的学问的私信作者哦。
职位地方:时尚之都