Fly.js 一个基于 Promise 的强大的支持多种 JavaScript 运行时的 http 请求库. 有了它, 您可以使用一份 http 请求代码在浏览器微信小程序 WeexNode 中都能正常运行同时可以方便配合 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 请求转发等功能, 详情请参考: 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
来源: https://juejin.im/post/5aaf222b51882555791873ed