同时支持Vue/mpvue/weex的http请求库,最大可能的实现不一样平台间的代码复用。

Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它,您可使用一份http请求代码在浏览器、微信小程序、Weex、Node中都能正常运行。同时能够方便配合 Vue家族的框架,最大可能的实现 Write Once Run Everywherejavascript

Github: github.com/wendux/flyvue

问题

随着 Weex 、mpvue 的发布,他们都是支持Vue.js语法。目前vue已经你可以运行在浏览器、小程序和Native了。尽管各个平台仍有差别,但已经基本能实现 Write Once Run Everywhere 。这使得咱们能够在多个端上实现尽量大限度在代码复用。可是不管是 vue 仍是Weex 、mpvue,它们本质上都只是一个View层,也就说最好的状况,也只能实现UI复用。但对于一个应用程序来讲,除了UI,最重要的就是数据了,而数据来源通常都是来自网络请求(大多数都是http)。在使用这些框架时,您的网络请求,都须要使用平台特定的API!这很糟糕,意味着您网络请求的代码不能复用,因此尽管UI能够复用,但咱们还须要去适配网络请求部分的代码。java

一致的网络请求

要解决这个问题,就须要一个能支持多个平台网络库,用户层提供统一的API,将平台差别在底层屏蔽。而 Fly.js就是这酱紫的一个网络库,为了方便axios使用者迁移,fly.js API设计风格和axios类似(但不彻底相同)!node

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

已支持的平台

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

Fly简单使用示例

下面示例如无特殊说明,则在全部支持的平台下都能执行。github

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

拦截器

Fly支持请求/响应拦截器,能够经过它在请求发起以前和收到响应数据以后作一些预处理。apache

//添加请求拦截器
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.axios

反馈

若是您有问题欢迎在 在github 提issue . fly.js github: github.com/wendux/fly小程序

相关文章
相关标签/搜索