独特的微信号_uniapp和原生小程序混合开发

独特的微信号_uniapp和原生小程序混合开发flyio是什么?一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。flyio的平台支持?目前Fly.js支持的平台包括:Node.js、微信小程序、Weex、ReactNative、QuickApp和浏览器,这些平台的JavaScrip…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...

(0)


相关推荐

  • pycharmsetting在哪_pycharm configuration怎么设置

    pycharmsetting在哪_pycharm configuration怎么设置关闭重复代码行提示File–>Settings–>Editor–>Inspections–>General–>Duplicatecodefragment

  • PyCharm使用教程 — 7、使用PyCharm进行DeBug调试

    PyCharm使用教程 — 7、使用PyCharm进行DeBug调试DeBug运行/调试Bug大家都知道是程序中的错误,导致程序不能正常运行。而DeBug的字面意思就是解决Bug。DeBug执行的方式也是有三种,与上面的代码运行章节类似,1、右键DeBug2、导航栏DeBug点击导航栏绿色的蜘蛛图标即可DeBug启动。3、通过mainDebug执行如果程序有main函数入口,可以点击左侧的绿色小三角,然后选择上图标识的Debug项目名即可。4、断点如果Debug的程序没有断点,则跟正常的执行没有区别。断点:一个断点标注一个代码行,当程序执行到

  • 计算机网络常见面试题总结

    计算机网络常见面试题总结

  • Unity Cutout材质 实现网格效果[通俗易懂]

    Unity Cutout材质 实现网格效果[通俗易懂]Cutout????效果????贴图准备????材质制作????效果????如图所示铁丝网不是模型只是一张128*128的贴图制作的材质,这样可以极大的降低模型面数制作也很速度!????贴图准备????ps中制作一张128*128尺寸带透明通道的图,如下所示:????材质制作????设置RenderingMode为Cutout模式,并且把贴图放到Albedo槽中????可以调节Tiling属性增加或减少网格密度…

  • tomcat大量time wait问题

    tomcat大量time wait问题在服务端访问量大的时候检测到大量的timewait,并且接口请求延时较高。执行netstat-n|awk‘/^tcp/{++S[$NF]}END{for(minS)printm,S[m]}’这个shell命令的意思是把netstat-n后结果的最后一条放到S[]数组中,如果相同则执行+1操作。此时能看到TCP各种状态下的连接数量,示例服务端架构是采用nginx

  • pycharm搭建python环境_pycharm如何配置编译环境

    pycharm搭建python环境_pycharm如何配置编译环境1.安装python27双击执行python-2.7.15.msi,选择装到根目录,建议d:\Python27。一路下一步,直到完成。安装完成之后,打开cmd,输入:python,如果显示以下内容则说明安装python成功如果提示命令不存在则需要设置环境变量。windows:右键我的电脑–属性–高级系统设置–高级–环境变量–系统变量找到path项,加上值,D:\Python27;D:\P…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号