Meituan-Dianping / mpvue

基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。
http://mpvue.com
MIT License
20.42k stars 2.07k forks source link

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

Closed wendux closed 6 years ago

wendux commented 6 years ago

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 commented 6 years ago

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

wendux commented 6 years ago

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

F-loat commented 6 years ago

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

anchengjian commented 6 years ago

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

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

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

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

F-loat commented 6 years ago

简单试用了一下,在 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 commented 6 years ago

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

F-loat commented 6 years ago

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

mcu13321 commented 6 years ago

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

F-loat commented 6 years ago

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

wendux commented 6 years ago

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

anchengjian commented 6 years ago

推荐可以放到 awesome-mpvue

arronf2e commented 6 years ago

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

wendux commented 6 years ago

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