uni-app 环境配置,uni.request封装,接口配置,全局配置,接口调用的封装
1.环境配置 (可参考uni-官网的环境配置)
common文件夹下新建config.js
let url_config = "" if(process.env.NODE_ENV === 'development'){
// 开发环境
url_config = 'https://*****.com/'
}else{
// 生产环境
url_config = 'https://*****.com/'
} export default url_config
2.uni.request封装
common文件夹下新建request.js
import urlConfig from './config.js' const request = {}
const headers = {}
const PORT1 = '/baseinfo' request.globalRequest = (url, method, data, power) => {
/* 权限判断 因为有的接口请求头可能需要添加的参数不一样,所以这里做了区分
1 == 不通过access_token校验的接口
2 == 文件下载接口列表
3 == 验证码登录 */ switch (power){
case :
headers['Authorization'] = 'Basic a3N1ZGk6a3N1ZGk='
break;
case :
headers['Authorization'] = 'Basic a3N1ZGlfcGM6a3N1ZGlfcGM='
break;
case :
responseType = 'blob'
break;
default:
headers['Authorization'] = `Bearer ${
this.$store.getters.userInfo
}`
headers['TENANT-ID'] = this.$store.getters.userInfo.tenant_id
break;
} return uni.request({
url: urlConfig + url,
method,
data: data,
dataType: 'json',
header: headers
}).then(res => {
if (res[].data.status && res[].data.code == ) {
return res[]
} else {
throw res[].data
}
}).catch(parmas => {
})
} export default request
3.接口配置
项目根目录下新建api文件,api下新建index.js
import request from '@/common/request.js'
import { formatGetUri } from '@/common/util.js' const api = {}
const PORT1 = 'baseinfo'
// POST请求方式
api.register = params => request.globalRequest(`${PORT1}/mobile/signUp`, 'POST//必须大写,为了兼容其他应用', params, )
// GET请求方式
api.register = params => request.globalRequest(`${PORT1}/mobile/signUp${formatGetUri(params)}`, 'GET //必须大写,为了兼容其他应用',{}, 1)
export default api
4. 新建common/util.js
/**
* 拼接对象为请求字符串
* 对于需要编码的文本(比如说中文)我们要进行编码
* @param {Object} obj - 待拼接的对象
* @returns {string} - 拼接成的请求字符串
**/
export function formatGetUri(obj: Object) {
const params: Array<string> = []
Object.keys(obj).forEach((key) => {
let value = obj[key]
if (typeof value !== 'undefined' || value !== null) {
params.push([key, encodeURIComponent(value)].join('='))
}
})
return '?' + params.join('&')
}
5.全局配置
在main.js中新增
import Vue from 'vue'
import App from './App'
import store from './store' // 与vue项目中配置相同,可自行配置 import request from './common/request.js'
import api from './api/index.js'
import url from './common/config.js' Vue.config.productionTip = false
Vue.prototype.$request = request
Vue.prototype.$api = api
Vue.prototype.$url = url App.mpType = 'app' const app = new Vue({
...App,
store
}) app.$mount()
5.接口调用
this.$api.register({mobile: this.mobile}).then(res => {
// 获得数据
console.log(res)
}).catch(res => {
// 失败进行的操作
})
6.推荐
在uni-app扩展组件中找到了一个封装的案例,大家如果觉得可以的话,可试用 request网络请求,支持拦截器,支持回调函数和Promise,
uni-app 环境配置,uni.request封装,接口配置,全局配置,接口调用的封装的更多相关文章
- 小程序api请求层封装(Loading全局配置)
前言 小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子 请求封装 小程序中有封 ...
- vue.config.js 配置 scss,less,sass全局配置 vuecli3
module.exports = { /* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath */ public ...
- 微信小程序-全局配置、组件、页面跳转、用户信息等
全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...
- 【源码分析】FastJson全局配置日期格式导致@JSONField(format = "yyyy-MM-dd")注解失效
出现的问题 我全局配置的时间格式是:yyyy-MM-dd HH:mm:ss @JSONField注解配置的时间格式是:yyyy-MM-dd 最终的返回结果是:yyyy-MM-dd HH:mm:ss 问 ...
- Log4Net 在ASP.NET WebForm 和 MVC的全局配置
使用log4net可以很方便地为应用添加日志功能.应用Log4net,开发者可以很精确地控制日志信息的输出,减少了多余信息,提高了日志记录性能.同时,通过外部配置文件,用户可以不用重新编译程序就能改变 ...
- Vue-API之全局配置
API 全局配置 Vue.config 是一个对象,包含 Vue 的全局配置. 源码位置:util/config.js 搜索config 可以找到其源码地址,其中声明了config的类型和默认参数 下 ...
- NIO开发Http服务器(3):核心配置和Request封装
最近学习了Java NIO技术,觉得不能再去写一些Hello World的学习demo了,而且也不想再像学习IO时那样编写一个控制台(或者带界面)聊天室.我们是做WEB开发的,整天围着tomcat.n ...
- uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
- HTML5 开发APP( 环境配置)
上一篇我写了关于新建项目,这一篇说一下配置环境我们新建一个移动app后,会发现一个mainifest.json文件,开发app所要配置的环境就在这个文件里 点击打开文件后会有配置界面,在配置界面的下方 ...
随机推荐
- fastdfs使用总结
参考:https://www.cnblogs.com/chiangchou/p/fastdfs.html 说明:这篇博客是为了记录我在安装和使用FastDFS分布式文件系统时遇到的问题和解决方法, ...
- 模拟ssh远程执行命令
目录 一.服务端 二.客户端 一.服务端 from socket import * import subprocess server = socket(AF_INET, SOCK_STREAM) se ...
- ASP.NET Core 获取主机名时的 "Decoded string is not a valid IDN name" 错误
在 ASP.NET Core 中通过 Request.Host.Host 获取主机名(hostname)时,如果主机名中包含非 ASCII 字符(比如 puny code),就会引发下面的异常: Sy ...
- 【LOJ#2507】[CEOI2011]Matching(KMP,树状数组)
[LOJ#2507][CEOI2011]Matching(KMP,树状数组) 题面 LOJ 题解 发现要做的是排名串的匹配. 然后我们考虑把它转成这个位置之前有多少个数小于当前这个数,这样子只要每个位 ...
- c# Winform 加载窗体
先来一个加载窗体代码 public partial class FrmLoading : Form { public BackgroundWorker updateDBWorker=new Backg ...
- C#上手练习3(while、do while语句)(添加机器人聊天)
C# while 循环与 for 循环类似,但是 while 循环一般适用于不固定次数的循环. while 循环的语法形式如下. while(布尔表达式){ 语句块;} while 语句执行的过 ...
- Linux问题记录——主机名变成了bogon
Linux问题记录——主机名变成了bogon 摘要:本文主要记录了主机名变成bogon的原因以及解决办法. 问题重现 主机名在一次登录后,变成了bogon,此后每次登录Linux系统时都是bogon. ...
- 异步和多线程Thread
刚接触线程的时候,感觉这个东西好神奇.虽然不是很明白,就感觉它很牛逼. 参考了一些大佬写的文章: https://www.cnblogs.com/yilezhu/p/10555849.html这个大佬 ...
- awk 输出前 N 列的最简单方法
最近遇到一种场景,需要输出一个文本信息的前 N 列. 众所周知 cut 可以指定分隔符并指定列的范围,如 cut -d' ' -f-4 就是以空格为分隔符输出前 4 列.但是 cut 的分隔符只能是一 ...
- ...mapMutations前面的三个点什么意思
...mapMutations(['login']),对象展开运算符