uni-app 环境配置，uni.request封装，接口配置，全局配置，接口调用的封装

雷学国 發表於 2019-6-3 14:53:00

uni-app 环境配置，uni.request封装，接口配置，全局配置，接口调用的封装

1.环境配置 (可参考uni-官网的环境配置)
common文件夹下新建config.js
<div class="cnblogs_code">
<pre>let url_config = ""

if(process.env.NODE_ENV === 'development'){
// 开发环境
url_config = 'https://*****.com/'
}else{
// 生产环境
url_config = 'https://*****.com/'
}

export default url_config</pre>
</div>
 
2.uni.request封装
common文件夹下新建request.js
<div class="cnblogs_code">
<pre>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 => {</pre>
<div>
<div>　　　　　　switch (parmas.code) {</div>
<div>　　　　　　　　case 401:</div>
<div>　　　　　　　　　　uni.clearStorageSync()</div>
<div>　　　　　　　　　　break</div>
<div>　　　　　　　　default:</div>
<div>　　　　　　　　　　uni.showToast({</div>
<div>　　　　　　　　　　　　title: parmas.message,</div>
<div>　　　　　　　　　　　　icon: 'none'</div>
<div>　　　　　　　　　　})</div>
<div>　　　　　　　　　　return Promise.reject()</div>
<div>　　　　　　　　　　break</div>
<div>　　　　　　}</div>
</div>
<pre>　　})</pre>
<pre> } export default request</pre>
</div>
 
3.接口配置
项目根目录下新建api文件，api下新建index.js
<div class="cnblogs_code">
<pre>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, 1) // GET请求方式 api.register = params => request.globalRequest(`${PORT1}/mobile/signUp${formatGetUri(params)}`, 'GET //必须大写，为了兼容其他应用',{}, 1)</pre>
<pre>export default api</pre>
</div>
 
4. 新建common/util.js
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">/**
* 拼接对象为请求字符串
* 对于需要编码的文本（比如说中文）我们要进行编码
* @param {Object} obj - 待拼接的对象
* @returns {string} - 拼接成的请求字符串
**/
export function formatGetUri(obj) {
const params = []
Object.keys(obj).forEach((key) => {
let value = obj
if (typeof value !== 'undefined' || value !== null) {
 params.push(.join('='))
}
})
return '?' + params.join('&')
}
</pre>
</div>
　　
5.全局配置
在main.js中新增
<div class="cnblogs_code">
<pre>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()</pre>
</div>
 
5.接口调用
<div class="cnblogs_code">
<pre>this.$api.register({mobile: this.mobile}).then(res => {
// 获得数据 
 console.log(res)
}).catch(res => { 　　// 失败进行的操作 })</pre>
</div>
 
6.推荐
在uni-app扩展组件中找到了一个封装的案例，大家如果觉得可以的话，可试用  request网络请求，支持拦截器，支持回调函数和Promise，
官网推荐request封装 
来源：https://www.cnblogs.com/gqx-html/p/10967570.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 环境配置，uni.request封装，接口配置，全局配置，接口调用的封装