大家好，又见面了，我是你们的朋友全栈君。
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 更适用与微信小程序
3. 详细对比：与axios和Fetch对比
注意：
本文章的封装代码只针对于微信小程序，如果需要在其他平台适用，本文章只做参考，请在阅读 flyio 文档后自行修改！
vue 项目可参考：Axios在vue项目中的二次封装解析
flyio 文档：Flyio帮助文档
封装完整代码：
代码语言：javascript复制import Fly from 'flyio/dist/npm/wx'
let baseUrl = 'https://fy.sysssc.com:9090/xgfy'
// 创建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
}
// 如果请求不成功，抛出错误。如返回 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 是否需要添加拦截
*/
const request = (url, params = {}, method = 'POST', needLoading = true, needIntercept = true) => {
let res = fly.request(url, params, {
method, // 请求方法
baseURL: baseUrl, // 请求基地址
timeout: 1000 * 30, // 超时时间 30s
headers: { // 请求头
needLoading, // 自定义请求头配置 => 是否需要loading
needIntercept
}
})
return res
}
export default {
request
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/197541.html原文链接：https://javaforall.cn
