阅读 1353

flyio支持快应用了

Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它,您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ,最大可能的实现 Write Once Run Everywhere。本文主要介绍一下如何在快应用中使用flyio。

Github: github.com/wendux/fly

支持快应用

快应用是九大手机厂商基于硬件平台共同推出的新型应用生态。用户无需下载安装,即点即用,享受原生应用的性能体验。快应用采用web开发技术栈,使用JavaScript语言开发,flyio官方在第一时间支持了快应用。具体使用参照下面文档。

标准的API

Fly在上层提供了一套标准的API,这样,您就可以在各个JavaScript环境中,以相同的方式发起网络请求,不同平台对应一个平台相关的adapter,将平台差异在底层屏蔽,使用时不同平台只需要引入flyio npm包中相应平台的入口文件即可,也正是因为如此,fly在各个平台下都可以保证轻量(没有冗余代码)。

同时,为了方便axios使用者迁移,fly.js API设计风格和axios相似(但不完全相同)!

Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API。不仅如此,Fly.js还支持请求/响应拦截器、自动转化JSON、请求转发等功能,详情请参考:github.com/wendux/fly

已支持的平台

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

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

接下来,您就可以使用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);
  });
复制代码

发起多个并发请求

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

全局配置

Fly配置支持实例级配置单次请求配置, 实例级配置可用于当前Fly实例发起的所有请求, 如:

//定义公共headers
fly.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((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")
    }
)
复制代码

除过以上这些使用,Fly.js 还有很多其它强大的功能,详情请移步Fly.js.

将Fly挂在app实例上

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

  var fetch = require("@system.fetch")
  var Fly=require("flyio/dist/npm/hap")
  var fly=new Fly(fetch)
  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("test").then((d)=>{
    this.data=d.data;
   //console.log(JSON.stringify(d))
})
复制代码

反馈

如果您有问题欢迎在 在github 提issue . fly.js github: github.com/wendux/fly

关注下面的标签,发现更多相似文章
评论