fly.js 的二次封装

flyio 是什么？ 

        一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。

flyio 的平台支持？

        目前Fly.js支持的平台包括：Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器，这些平台的 JavaScript 运行时都是不同的。相比较于axios，flyio支持更多的平台。

和axios有什么区别？

        1. flyio 能更好的支持小程序，而 axios 更通用一些

        2. flyio 相比较于 axios 体积更小，在小程序最多8M（分包，单包最多2M）的情况下，flyio 更

文件目录结构如下：

 fly.js代码如下：

import Fly from 'flyio/dist/npm/wx' // 根据不同的环境引入不同的包
// #ifdef H5  // 只有H5平台支持
import Fly from 'flyio/dist/npm/fly'
// #endif
// #ifndef H5 //除去H5平台以外的 如：微信小程序和APP版本
import Fly from 'flyio/dist/npm/wx'
// #endif
//该位置可根据不同运行环境进行判断 
let baseUrl = 'http://116.141.0.158:8083/'

// 创建fly实例
let fly = new Fly()

//处理请求队列配置 

// 正在请求的 url 数组
let pendingArr = []
// 获取正在请求/响应的请求索引
let pendingIndex = url => pendingArr.findIndex(item => item.url === url)
// 判断是否正在请求
let isPending = url => {
	return pendingIndex(url) > -1 // 当前url正在请求中
}
// 移除完成的请求
let removePending = url => {
	pendingArr.splice(pendingIndex(url), 1)
}
// pending数组中是否含有还在进行且需要loading的request
let hasPendingWithLoading = () => {
	return Boolean(pendingArr.filter(item => item.headers.needLoading).length)
}




// 添加请求拦截器
fly.interceptors.request.use((request) => {
	// 给所有请求添加自定义header
	if (request.headers.needIntercept === true && isPending(request.url)) {
		// 请求重复，终止
		let err = new Error('重复请求已被拦截')
		err.request = request
		return Promise.reject(err)
	}
	wx.getNetworkType({ // 每次请求时判断网络是否有问题
		complete: function(res) {
			if (res.networkType === 'none' || res.networkType === 'unknown') {
				wx.showToast({
					title: '网络不稳定，请检查网络',
					icon: 'none',
					mask: true,
					duration: 5000
				})
				return false
			}
		}
	})
	pendingArr.push(request)
	if (request.headers.needLoading === true) { // 如果需要显示loading
		wx.showLoading({
			title: '正在加载..',
			mask: true
		})
	}
	return request
})

// 添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use((response) => {
	removePending(response.request.url) !hasPendingWithLoading() && wx
	.hideLoading() // 没有正在请求并且需要显示loading的，关闭loading显示
	if (Number(response.data.code) === 0) {
		// 请求成功后，只将请求结果的data字段返回
		return response.data
	} else {
		// 如果请求不成功，抛出错误。如返回 500，401等
		return Promise.reject(new Error(response.data.msg || '系统错误,请联系管理员!'))
		wx.showToast({
			title: response.data.msg || '系统错误,请联系管理员!',
			icon: 'none',
			mask: true,
			duration: 3000
		})
	}

}, (err) => {
	// 发生网络错误后会走到这里
	removePending(err.request.url)
	wx.hideLoading() // 网络错误，关闭loading
	// return Promise.reject(new Error('系统错误,请联系管理员!'))
	wx.showToast({
		title: '系统错误,请联系管理员!',
		icon: 'none',
		mask: true,
		duration: 3000
	})
})

// 请求配置
/**
 * @param {*} url 请求接口
 * @param {*} params 请求参数
 * @param {*} method 请假方式 GET / POST
 * @param {*} needLoading  是否需要loading
 * @param {*} needIntercept  是否需要添加拦截
 */
let Authorization = `9j8yMV ada46702b50d20fe9415e915a1963751`
const request = (url, params, method) => {

	let res = fly.request(url, params, {
		method: method, // 请求方法
		baseURL: baseUrl, // 请求基地址
		timeout: 1000 * 30, // 超时时间 30s
		headers: { // 请求头
			Authorization,
			// needLoading:needLoading, // 自定义请求头配置 => 是否需要loading
			// needIntercept:needIntercept,
			// Accept: 'application/json',
			'Content-Type': 'multipart/form-data',
		}
	})
	return res
}
export default request

 api.js代码如下：

import request from './fly'
export default {	
	async getNewsData (param) {
	  const methodType = 'POST';
	  const url = 'mobile-portal/task/sync.vm';
	  return request( url, param, methodType);
	},
}

调用fly方法

import http from '@/static/js/api.js'    

http.getNewsData(data)

详细文档：https://github.com/wendux/fly