Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

推荐:支持Vue、mpvue、weex的http请求库,最大可能的实现不同平台间的代码复用。 #109

Closed
wendux opened this issue Mar 16, 2018 · 13 comments
Labels
help wanted Extra attention is needed

Comments

@wendux
Copy link

wendux commented Mar 16, 2018

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

Github: https://github.com/wendux/fly

问题

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

一致的网络请求

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

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

已支持的平台

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

Fly简单使用示例

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

发起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支持请求/响应拦截器,可以通过它在请求发起之前和收到响应数据之后做一些预处理。

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

反馈

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

最后

@anchengjian 如果您觉得此Issue对mpvue(或者整个vue)生态有益,能给出官方答复的话,感谢。

@F-loat
Copy link
Contributor

F-loat commented Mar 16, 2018

axios 其实也有适配层的吧,不过只支持了 node 和 browser

@wendux
Copy link
Author

wendux commented Mar 16, 2018

@F-loat 是的,axios支持 node 和 browser, 但fly.js不同的是理论上可以适配各个javaScript运行时,并且适配非常简单。这里有一个 fly.js与axios的对比 。还有,我们vue代码复用一般是需要在端之间(web、weex、微信小程序)复用,这些平台都有View层,所以为了复用,适配前端平台会更重要些。

@F-loat
Copy link
Contributor

F-loat commented Mar 16, 2018

@wendux 赞,这样再把路由的问题处理了,mpvue 直接转 web 就问题不大了

@anchengjian
Copy link
Member

这种能跨多端的统一 API 的 http 请求库肯定对于生态是有益的,不仅是对于 mpvue 有益,可以说是对于整个前端开发行业都是有益的。

对于任何一个库、框架究竟是否好用,是否会流行,fly.js 和 mpvue 其实一样,更多的还是要考虑其设计的 API 的实用能力,易用和友好情况,甚至还要考虑是否符合历史进程,你问我支持不支持,我当然是支持的。

在支持这种类型的库的同时,还要提醒各位开发者朋友,小程序本身是有包大小限制的。

即使 fly.js 本身的包已经非常非常小,但还希望 fly.js 的朋友可以提供更详细的类似 mpvue 这种小程序框架(可以直接使用 npm modules)的使用文档,或者再针对这种场景专门做做优化,那就简直就更好了。

@F-loat
Copy link
Contributor

F-loat commented Mar 18, 2018

简单试用了一下,在 webpack 中分别配置 alias 为 flyio: 'flyio/dist/npm/wx'flyio: 'flyio/dist/npm/fly' 就可以像下面这种方式实现一套代码同时兼容 小程序 和 web

import Fly from 'flyio'

const fly = new Fly()

if (wx) fly.config.baseURL= 'https://xxx.com/'

@mcu13321
Copy link

为啥我这边在小程序端alias要通过这样的配置,flyio: 'flyio/dist/npm/wx.js'

@F-loat
Copy link
Contributor

F-loat commented Mar 19, 2018

@mcu13321 都可以吧应该,dist 目录下的是打包后的

@mcu13321
Copy link

我的意思是我这边引入之后就没有lib目录,所以只能从dist目录中取了,所以你是怎么配置成功的。。。

@F-loat
Copy link
Contributor

F-loat commented Mar 19, 2018

@mcu13321 确实,当时写错了,更正了已经

@wendux
Copy link
Author

wendux commented Mar 19, 2018

@mcu13321flyio/dist/npm/目录取是对的,fly项目中是本身是没有lib目录。以fly工程的文档为准就行。另外 @F-loat @mcu13321 ,在fly第一个正式版发布前,请大家多关注fly github, 主页有npm包的最新版本号, 目前最新版本是0.3.6, 有更新就及时同步,有问题也请大家在fly isuue下交流,可以及时回复。

@hucq hucq added the help wanted Extra attention is needed label Mar 21, 2018
@anchengjian
Copy link
Member

推荐可以放到 awesome-mpvue

@arronf2e
Copy link

@wendux 按照上面的方法引入了,为什么 engine 为什么是undefined的呢

@wendux
Copy link
Author

wendux commented Mar 23, 2018

@arronf2e 请更新flyio到最新版再试,还有,如果有问题,还请在flyio项目下提issue, 看见后我可以第一时间回复。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

6 participants