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