uni-app中使用flyio请求_uniapp能否上架

uni-app中使用flyio请求_uniapp能否上架前言:因为最近需要使用uni-app进行小程序的开发,所以最近在搭建小程序的环境,作为一个使用vue的前端小白,自然选择了支持vue的uni-app。但是uni自带的uni.request需要自己封装(因为懒)所以选择了flyio进行请求封装。环境配置:npminstallflyio在这里我使用npm进行安装,也可以下载源文件wx,js或者wx.umd.min.js1.先看一下np…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言:

因为最近需要使用uni-app进行小程序的开发,所以最近在搭建小程序的环境,作为一个使用vue的前端小白,自然选择了支持vue的uni-app。但是uni自带的uni.request需要自己封装(因为懒)所以选择了flyio进行请求封装。

环境配置:

npm install flyio
在这里我使用npm进行安装,也可以下载源文件
wx,js或者wx.umd.min.js

1.先看一下npm安装后的使用方法:

1.1 创建一个api.js,初始化一个fly实例,然后在里面封装所需要的接口。
这里我使用了easy-mock进行接口测试

import Fly from "flyio/dist/npm/wx"

const fly = new Fly;


// 配置请求根域名
fly.config.baseURL = " https://www.easy-mock.com/mock/5df0a676d0843e1ef18f6e7d";
// 配置响应拦截器
fly.interceptors.response.use(
    (response) => {
        // 如果请求报错
        if (response.data.code != 10000) {
            uni.showModal({
                title: '温馨提示',
                content: response.data.data
            })
        } else {
            //只将请求结果的data字段返回
            return response.data.data
        }
    },
    (err) => {
        //发生网络错误后会走到这里
        return Promise.resolve("网络请求:ERROR!")
    }
);
// 配置请求拦截器
fly.interceptors.request.use((request) => {
    request.headers["token"] = uni.getStorageSync('token');
    return request;
});

async function wxLogin() {
    return await new Promise((resolve, reject) => {
        wx.login({
            success(res) {
                if (res.code) {
                    resolve(res.code)
                }
            }
        })
    })
}

// 登录
export const login = async (params) => {
    console.log('开始登录...');
    let code = await wxLogin();
    let res = await fly.get('/user/login', {code: code});
    uni.setStorageSync('token', res.token);
    uni.setStorageSync('openid', res.openid)
};

//普通接口
export const getList = async (params) => {
    let res = await fly.get('/getlist', params);
    console.log(res)
};

1.2 然后在main.js或者app.vue里全局引入即可使用

import Vue from 'vue'
import App from './App'
import * as API from './static/utils/api'

Vue.prototype.$api = API;
Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
    ...App
});
app.$mount();

2.先看一下npm安装后的使用方法:

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
var fly=new Fly; //创建fly实例

只是引入方式不同而已。

3.其他官方方法请直接看文档吧,我要搬砖去了flyio886~

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Bash Export命令「建议收藏」

    Bash Export命令「建议收藏」一.shell和export《1》用户登录到Linux系统后,系统将启动一个用户shell。在这个shell中,可以使用shell命令或声明变量,也可以创建并运行shell脚本程序。运行shell脚本程序时,系统将创建一个子shell。此时,系统中将有两个shell,一个是登录时系统启动的shell,另一个是系统为运行脚本程序创建的shell。当一个脚本程序运行完毕,脚本shell将终止,返回…

    2025年9月28日
    3
  • git 命令怎么删除远程分支文件_git删除远程仓库分支

    git 命令怎么删除远程分支文件_git删除远程仓库分支本地删除请看:git命令怎么删除本地分支查看所有分支查看项目的远程分支:gitbranch-r删除远程分支比如我们要删除远程分支origin/SLT_table_reportgitpushorigin-d分支名我们执行:gitpushorigin-dSLT_table_report删除成功注意这里不能写成origin/SLT_table_report,不然会报错:具体请参考【git删除远程分支报错error:unabletodelete‘

    2022年10月16日
    5
  • SPEL表达式_什么是EL表达式

    SPEL表达式_什么是EL表达式前言最近在搞项目的自定义流程,主流的流程引擎flowable不能很好的支撑业务需求,再考虑到后期的拓展,部门经理说让自己搞一套。这里玩SpEL表达式是为了解决业务流向判断的[条件表达式]问题仿佛记得java是有自定义表达式的,昨儿翻阅书记目录却没有找到,可能是我记错了吧(如果有知道的朋友请留言)。那就直接用SpEL表达式吧,早上查阅了下网上的资料,下面这篇文章挺全的,遂转载一下(copy过来添加了锚点定位,方便以后查阅)8.1介绍8.2功能概述8.3使用Spring的表达接口表达式

    2025年11月1日
    5
  • 实例分割简述_图像实例分割

    实例分割简述_图像实例分割针对图像目标我们可以利用目标检测算法将其框出来也可以利用语义分割算法将属于猫的像素标记出来存在的弊端:1、目标检测可以区分个体但不够准确2、语义分割可以划分像素但不可以区分个体实例分割0、实例分割可以解决以上问题1、利用先验框获得建议框2、利用建议框获得预测框3、利用预测框获得语义分割结果…

    2022年8月23日
    10
  • Mysql主从备份和SQL语句的备份

    MySQL服务器的主从配置,本来是一件很简单的事情,无奈不是从零开始,总是在别人已经安装好的mysql服务器之上,这就会牵扯到,mysql的版本,启动文件,等一些问题。http://www.cnb

    2021年12月23日
    51
  • 【MySQL案件】ERROR 1665 (HY000)

    【MySQL案件】ERROR 1665 (HY000)

    2022年1月6日
    58

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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