前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >原生小程序使用 flyio,以及拦截器

原生小程序使用 flyio,以及拦截器

作者头像
全栈程序员站长
发布于 2022-10-03 07:09:53
发布于 2022-10-03 07:09:53
85900
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

原生小程序的request请求都是异步请求,在实际项目中使用起来很麻烦,自己封装的方法又不够用,所以想到了flyio,不仅可以实现Promise,而且还可以对所有的页面请求进行拦截,使用起来非常的方便。

第一件事首先也是先引用flyio.js了。

下载地址:flyio.js

在utils目录新建http.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var Fly = require("flyio.js")//引入路径根据自己放置的目录配置
var fly = new Fly;
fly.interceptors.request.use((request) => {
    request.timeout = 30000;

    if (wx.getStorageSync('token')) {//检查本地缓存是否有token存在没有则重新获取
        request.headers = {//设置请求头
            "content-type": "application/json",
            "cld.stats.page_entry": wx.getStorageSync('scene'),
            "version": app.globalData.version,
            "token": wx.getStorageSync('token')
        }
        return request;
    } else {
        fly.lock();//锁住请求
        return app.Load().then(res => {//重新获取token
            request.timeout = 30000,
                request.headers = {//设置请求头
                    "content-type": "application/json",
                    "cld.stats.page_entry": wx.getStorageSync('scene'),
                    "version": app.globalData.version,
                "token": wx.getStorageSync('token')
                }
            wx.showLoading({
                title: "加载中",
                mask: true,
            });
            fly.unlock();//解锁请求
            return request;//继续之前的请求
        })
    }
})

fly.interceptors.response.use(
    (response) => {
        wx.hideLoading();
        return response;//请求成功之后将返回值返回
    },
    (err) => {
        //请求出错,根据返回状态码判断出错原因
        console.log(err)
        wx.hideLoading();
        if (err.status == 0) {
            return "网络连接异常"
        } else if (err.status == 1) {
            return "网络连接超时"
        } else if (err.status == 401) {
            return "用户未登录"
        } else {
            if (err.response.data.message) {
                return err.response.data.message
            } else {
                return '请求数据失败,请稍后再试'
            }
        };
        // Do something with response error
    }
)
export default {
    fly: fly
}

在其他页面引用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import http from "../../utils/http.js"

使用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  http.fly.post(baseUrl + 'tt/news', {
            type: 1,
            page: 1
        }).then(res => {
            console.log(res)
        })

具体使用文档:https://wendux.github.io/dist/#/doc/flyio/readme

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/197335.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月4日 下,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
php小程序开发完整教程_微信小程序request封装
一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、自动转换JSON、支持请求/响应拦截器、强大的http请求库。 可以让您在多个端上尽可能大限度的实现代码复用。 flyio官方文档 flyio下载地址
全栈程序员站长
2022/10/04
1.2K0
php小程序开发完整教程_微信小程序request封装
uni-app中使用flyio请求_uniapp能否上架
因为最近需要使用uni-app进行小程序的开发,所以最近在搭建小程序的环境,作为一个使用vue的前端小白,自然选择了支持vue的uni-app。但是uni自带的uni.request需要自己封装(因为懒)所以选择了flyio进行请求封装。
全栈程序员站长
2022/10/29
8190
小程序第七讲:恰如其分的重构和 Spring 拦截器登录校验
截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。
用户1093975
2018/12/28
5210
小程序第七讲:恰如其分的重构和 Spring 拦截器登录校验
微信小程序 封装request请求
超级小的大杯柠檬水
2023/06/18
6720
使用Fly.io进行Ajax请求管理:移动端登录鉴权开发详解
在移动应用开发中,登录鉴权是一个至关重要的环节。它不仅关系到用户数据的安全性,还直接影响用户体验。传统的登录鉴权方式往往涉及复杂的服务器端逻辑和繁琐的前端代码。而使用Fly.io这样的轻量级HTTP请求库,可以极大地简化这一过程,提高开发效率和应用性能。
lyushine
2024/12/04
1300
mpvue中使用flyio请求「建议收藏」
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/10/04
2480
原生微信小程序flyio封装多baseURL配置请求,如同axios一样非常爽利的使用api
1.下载 引入 flyio 基于 promise Javascript http请求的终极解决方案。也就是说,在任何能够执行 Javascript 的环境,只要具有访问网络的能力,Fly都能运行在其上,提供统一的API。 fly下载地址
全栈程序员站长
2022/10/04
1.3K0
小程序 flex_fly app
在小程序中使用请求,只能使用原生的wx.request,如果想要向axios一样使用三方包,只能使用flyio,不然会报错,同时flyio是属于多种兼容的可以放心使用到多端。
全栈程序员站长
2022/10/04
3240
独特的微信号_uniapp和原生小程序混合开发
一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
全栈程序员站长
2022/10/03
7490
axios 小程序_vscode使用uniapp
在小程序中使用请求,只能使用原生的wx.request,如果想要向axio一样使用三方包,只能使用flyio,不然会报错,同时flyio是属于多种兼容的可以放心使用到多端。
全栈程序员站长
2022/10/05
3170
微信小程序请求封装
config.js const baseUrl = 'http://127.0.0.1:8000/'; export { baseUrl } index.js import { request } from './request' module.exports = { // 获取导航 getNavList: (data) => request('nav/', 'GET', data), } request.js import { baseUrl } from './confi
lyudev
2023/03/01
6500
微信小程序请求封装
flyio 无感刷新token
大家好,又见面了,我是你们的朋友全栈君。 https://www.jianshu.com/p/b37a86fe0ac7?utm_campaign=maleskine&utm_content=note&
全栈程序员站长
2022/10/04
9190
微信小程序接口请求token过期用户无感应获取token重新调用接口
封装接口请求,我们的业务需要在header上加token和openid,可以根据自己的业务逻辑进行项目改变。 const baseUrl = "xxx"; const http = ({ url = '', param = {}, type = 'json', callback = '', ...other } = {}) => { wx.showLoading({ title:'请求中...', }) let timeStart = Date.now();
安德玛
2022/03/08
1.9K0
mpvue搭建小程序框架
由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler) 运行时框架 runtime 和代码编译器 compiler 实现
达达前端
2019/07/15
2.3K0
mpvue搭建小程序框架
微信小程序前端分页实现思路以及示例
今天在学习微信小程序的时候,遇到了前端需要做下拉刷新的一个分页逻辑的操作,写本文章来记录以下实现微信前端下拉分页的实现。
吃猫的鱼Code
2023/02/13
1.4K0
flyme开放平台_uniapp重定向
[Fly.js](https://github.com/wendux/fly) 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它,您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ,最大可能的实现 Write Once Run Everywhere。
全栈程序员站长
2022/10/03
7830
在小程序/mpvue中使用flyio发起网络请求「建议收藏」
Flyio Github: https://github.com/wendux/fly
全栈程序员站长
2022/10/04
1K0
php调用第三方api接口_uniapp ios原生插件开发
Fly.js 是一个基于 promise 的,轻量且强大的Javascript http 网络库,它有如下特点:
全栈程序员站长
2022/10/04
6150
mpvue——API请求封装(小程序原生)
能用,但不是最好的方法,最好的还是fly,因为为了以后多平台的考虑,最好使用fly.js,做之前先关闭校验合法域名,因为我没在后台进行配置
思索
2024/08/16
1000
mpvue——API请求封装(小程序原生)
小程序同步异步
最近一段时间写微信小程序大家或许注意到了有些时候在登录的时候莫名其妙的报错了,然后就开始一路找bug之路,每次console.log都没问题都有数据啊,但是就是报错,这时候用断点调试法发现,上一步的函数体还没有执行完毕呢,下一个函数就开始执行了,但是呢下一步的函数还必须需要上一步返回的参数不可,百度了一下才知道那是因为微信小程序是异步执行的,两个函数同时执行谁也不等谁,这里如果有兄弟不明白同步和异步的话可以百度一下就知道了,这时候必须要使用javascript的函数Promise,但是呢微信小程序增加ES6的promise特性支,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现ES6的promise特性,网上有第三方自己造的轮子,但是我用了以后我就后悔了,真的是一脸懵懂啊,想了想算了,快算了自己想个办法吧
江一铭
2022/06/16
6110
相关推荐
php小程序开发完整教程_微信小程序request封装
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档