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

 

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

什么是fly.js呢？

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。目前Fly.js支持的平台包括：Node.js 、微信小程序 、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点击访问

我们这里使用node.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请求

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);
  });

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