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

全栈程序员站长

发布于 2022-10-29 12:35:53

7890

发布于 2022-10-29 12:35:53

文章被收录于专栏：全栈程序员必看

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

前言：

因为最近需要使用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.cn/196077.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月8日上，如有侵权请联系 cloudcommunity@tencent.com 删除

npm

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

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

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

登录后参与评论

0 条评论

热度