在uni-app中应用Flyio

uni-app的网络请求API

API

• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

网络请求

uni-app封装了发起网络请求以及拦截器的API ：

发起请求： uni.request(OBJECT) 详情

拦截器： uni.addInterceptor(STRING, OBJECT)

Flyio

Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库

它在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行

特点：

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

引入fly

let Fly
//微信小程序
//#ifdef MP-WEIXIN
Fly = require('flyio/dist/npm/wx')
//#endif

//APP版本
//#ifdef APP-PLUS
Fly = require("flyio/dist/npm/weex")
//#endif

//支付宝小程序
//#ifdef MP-ALIPAY
Fly = require('flyio/dist/npm/ap')
//#endif

// H5版本
// #ifdef H5
Fly = require('flyio/dist/npm/fly')
//#endif

let fly = new Fly()

在uni-app中使用

在uni-app 中您也可以将fly实例挂在vue原型上，这样就可以在任何组件中通过this方便的调用：

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly
... //添加全局配置、拦截器等
Vue.prototype.$request=fly //将fly实例挂在vue原型上

在组件中您可以方便的使用：

this.$request.get("/test",{xx:6}).then((d)=>{
      //输出请求数据
      console.log(d.data)
      //输出响应头
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })

拦截器封装

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

参考：https://www.npmjs.com/package/flyio