uni-app的使用分享(二)分享下fly.js

绝地灬酷狼 2022-03-27 11:56 524阅读 0赞

之前曾经想过既然支持npm安装了，那我尝试下axios可不可以使用呢？当然，是不能够使用的，在小程序这个环节中，于是我就开始寻找能替代他的。我就找到了fly.js。

**什么是fly.js呢？**

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。目前Fly.js支持的平台包括：[Node.js][] 、[微信小程序][Link 1] 、[Weex][] 、[React Native][] 、[Quick App][] 和浏览器，这些平台的 JavaScript 运行时都是不同的。

这样的话我们勇气来就很爽了，不过他有什么特点，好处值得我们使用呢?

1.  **提供统一的 Promise API。**
2.  **浏览器环境下，轻量且非常轻量 。**
3.  **支持多种JavaScript 运行环境**
4.  **支持请求／响应拦截器。**
5.  **自动转换 JSON 数据。**
6.  **支持切换底层 Http Engine，可轻松适配各种运行环境。**
7.  **浏览器端支持全局Ajax拦截 。**
8.  **H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片。**

这里先放一下他的官网，[https://wendux.github.io/dist/\#/doc/flyio/readme][https_wendux.github.io_dist_doc_flyio_readme]点击访问

我们这里使用node.js的方法引用。[https://github.com/wendux/fly/blob/master/dist/npm/wx.js][https_github.com_wendux_fly_blob_master_dist_npm_wx.js]先下载此文件，

然后新建一个fly.js的文件，接下来引入：

var Fly=require("../wx.js") //wx.js为您下载的源码文件
    var fly=new Fly; //创建fly实例

然后创建一个变量，是全局访问的根路径，可以在任意文件中访问

const host ='http://jsonplaceholder.typicode.com/comments?postId=1';

拦截器部分是fly.js很强大的功能，可以通过它在请求发起之前和收到响应数据之后做一些预处理。下面的示例是添加一个请求的拦截器。Authorization则是请求校验，权限验证。request.timeout是超时时间。

fly.interceptors.request.use((request) => {
        request.timeout = 30000;
        if (uni.getStorageSync('token')) {//检查本地缓存是否有token存在没有则重新获取
            request.headers = {//设置请求头
                Authorization:`Bearer xxxxxxxxxxxxxxxxx`
            }
            return request;
        } else {
            fly.lock();//锁住请求
            return app.Load().then(res => {//重新获取token
                request.timeout = 30000,
                    request.headers = {//设置请求头
                        "content-type": "application/json",
                        "cld.stats.page_entry": uni.getStorageSync('scene'),
                    "token": uni.getStorageSync('token')
                    }
                uni.showLoading({
                    title: "加载中",
                    mask: true,
                });
                fly.unlock();//解锁请求
                return request;//继续之前的请求
            })
        }
    })

**请求拦截器**中的request对象结构如下：

{
      baseURL,  //请求的基地址
      body, //请求的参数
      headers, //自定义的请求头
      method, // 请求方法
      timeout, //本次请求的超时时间
      url, // 本次请求的地址
      withCredentials //跨域请求是否发送第三方cookie
    }

**响应拦截器**中的response对象结构如下

{
      data, //服务器返回的数据
      engine, //请求使用的http engine(见下面文档),浏览器中为本次请求的XMLHttpRequest对象
      headers, //响应头信息
      request  //本次响应对应的请求信息
    }

然后底部抽象出来

fly.config.baseURL = host;
    export default {
        fly: fly
    }

在你想使用到的vue文件中，引入它，然后使用

import fly from "../../fly.js";

发起GET请求

发起POST请求

fly.post('/user', {
        name: 'Doris',
        age: 24
        phone:"18513222525"
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

使用起来非常方便，无论是app还是小程序均可使用，其他功能留给你自己去探索吧~~~

[Node.js]: https://nodejs.org/
[Link 1]: https://mp.weixin.qq.com/cgi-bin/wx
[Weex]: http://weex.apache.org/
[React Native]: http://facebook.github.io/react-native/
[Quick App]: https://www.quickapp.cn/
[https_wendux.github.io_dist_doc_flyio_readme]: https://wendux.github.io/dist/#/doc/flyio/readme
[https_github.com_wendux_fly_blob_master_dist_npm_wx.js]: https://github.com/wendux/fly/blob/master/dist/npm/wx.js