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 1:
headers['Authorization'] = 'Basic a3N1ZGk6a3N1ZGk='
break;
case 2:
headers['Authorization'] = 'Basic a3N1ZGlfcGM6a3N1ZGlfcGM='
break;
case 3:
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[1].data.status && res[1].data.code == 200) {
return res[1]
} else {
throw res[1].data
}
}).catch(parmas => {
switch (parmas.code) {
case 401:
uni.clearStorageSync()
break
default:
uni.showToast({
title: parmas.message,
icon: 'none'
})
return Promise.reject()
break
}
})
}
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'
// 注册获取验证码
api.register = params => request.globalRequest(`${PORT1}/mobile/signUp`, 'GET //必须大写,为了兼容其他应用', params, 1)
export default api
4.全局配置
在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,
官网推荐request封装