大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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帮助文档
封装完整代码:
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
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/197541.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...