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) => {// 给所有请求添加自定义headerif (request.headers.needIntercept === true && isPending(request.url)) {// 请求重复，终止let err = new Error('重复请求已被拦截')err.request = requestreturn 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) { // 如果需要显示loadingwx.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, // 超时时间 30sheaders: { // 请求头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

fly.js 的二次封装相关推荐

高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）...
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递二.js进阶ajax函数封装 ajax1.js 1 function ajax( ...
微信小程序对request方法二次封装
微信小程序跟支付宝小程序都提供了一个发起 HTTPS 网络请求的方法request,那么为了节省一些操作我们有必要对它进行一个二次的封装 1.在app.js里配置baseUrl // 注册一个小程序 ...
python+selenium十：selenium的二次封装
python+selenium十:基于原生selenium的二次封装 from selenium import webdriverfrom selenium.webdriver.support.wai ...
二次封装arcgis的timeslider
arcgis的timeslider是对dojo slider二次封装, 项目需要,所有Map用统一样式的slider,所以写了一个common的dojo class,统一调用生成slider,作为对t ...
二次封装dojo slider
上次的二次封装timeslider,挺有意思,又来封装一个dojo的,样式还是用arcgis的. 实现更多功能,包括HorizontalSlider和VerticalSlider, 刻度的显示隐藏,标 ...
原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
Vue二次封装axios为插件使用
照例先贴上 axios 的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-re ...