微信小程序：flyio在mpvue中的实践

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：

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

来自官方文档： Flyio文档

配置

首先安装flyio，通过命令：

npm install flyio

在mpvue中引入，在项目build -> webpack.base.conf.js文件添加如下：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue': 'mpvue',
      '@': resolve('src'),
      flyio: "flyio/dist/npm/wx"    <---------- 添加这个路径，用flyio作为别名。
    },
    symlinks: false,
    aliasFields: ['mpvue', 'weapp', 'browser'],
    mainFields: ['browser', 'module', 'main']
  },

之后再使用flyio就不需要写那个又臭又长的路径，直接使用flyio代替。

例如在request.js中：

import Fly from 'flyio' // 引入flyio
const fly = new Fly()  

请求配置

请求配置可以通过fly中的config来设置，例如一些通用配置如下：

// 配置基础项
fly.config.timeout = 10000 // 超时
fly.config.baseURL = global.BASEURL // 基地址,配置在一个文件中。
fly.config.params = {} // 设置公共参数
fly.config.headers = {'Content-Type': 'application/json'} // 公共请求头

请求拦截器

Fly支持请求／响应拦截器，可以通过它在请求发起之前和收到响应数据之后做一些预处理。

const urlWhitelist = ['/token']
// 请求拦截器
fly.interceptors.request.use((request)=>{
	// 对请求进行处理，例如：
	// 自定义请求header
	// 添加请求白名单等
	if (urlWhitelist.includes(request.url)) {
		// 是否在白名单中
	}
      //打印出请求体
      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")
    }
)

参考

Flyio文档