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~

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python中的int函数_python int()

    python中的int函数_python int()python中Int8Int16Int32Int64floatuint8Int8,占1个字节.Int16,占2个字节.Int32,占4个字节.Int64,占8个字节.float类型取值范围:-1到1或者0到1uint8类型取值范围:0到255(通常用于RGB图像中)#转换img.astype(‘uint8’)…

  • Linux改变图片大小的命令,Linux运维知识之linux下使用convert命令修改图片分辨率…

    Linux改变图片大小的命令,Linux运维知识之linux下使用convert命令修改图片分辨率…本文主要向大家介绍了Linux运维知识之linux下使用convert命令修改图片分辨率,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助。Convert的resize子命令应该是在ImageMagick中使用较多的命令,它实现了图片任意大小的缩放,唯一需要掌握的就是如何使用它的一些参数测试设定值:此说明文件中所用的原始文件(src.jpg),宽度:200,高度:150命令格式:…

  • 软件测试用例设计 (一)等价类划分法「建议收藏」

    软件测试用例设计 (一)等价类划分法「建议收藏」软件测试对于软件的重要性不言而喻,是计算机类学生毕业后的一个重要从业方向之一。如果要从事软件测试,那么有些必备的技能还是要有的。比如,测试理论、测试工具、测试文档的编制。今天我们就来看看最最最重要的测试雷论:黑盒测试用例设计方法——等价类,可以说,这个不会,你的软件测试理论约等于0、目录1.为什么要掌握等价类用例设计方法2.等价类划分法是什么3.等价类划分法的设计步骤4.等价类划分实例走起步骤1:划分等价类步骤2:设计用例覆盖有效等价类步骤3:设计用例覆盖无效等价类

    2022年10月17日
  • Java 认证考试 OCAJP 经验总结

    Java 认证考试 OCAJP 经验总结1. 考证、认证是否有用含金量的话题关于认证考试(无论什么认证)是否有用?这个话题无论是在哪里都有人问。这个问题就好比上大学是否有用吗一样,有的人没上过大学一样年薪百万。认证这种东西需要的时候即有用,不需要的时候就没用。有,并没有什么坏处。说实话个人感觉这证件没什么大用。而自己想考的理由完全是想自我check下,逼自己复习学习基础。如果你是刚毕业的GH或者在校的,手里有些零花钱的可以考虑下,…

  • sql模糊查询 like[通俗易懂]

    sql模糊查询 like[通俗易懂]like经常与where字句和通配符在一块进行使用,表示像啥啥,模糊查询通配符主要是_和%  %百分号表示零个,一个或多个字符  _下划线表示单个字符**注意:**1、MSAccess使用问号(?)而不是下划线(_)2、百分号和下划线也可以组合使用!   3、可以使用AND或OR运算符组合任意数量的条件语法:select*from表名where字段…

  • Android四大组件–MediaPlayer详解(转)

    Android四大组件–MediaPlayer详解(转)

发表回复

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

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