uni-app 环境配置，uni.request封装，接口配置，全局配置，接口调用的封装
<p>1.环境配置 (可参考uni-官网的环境配置)</p><p>common文件夹下新建config.js</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<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 class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p> </p>
<p>2.uni.request封装</p>
<p>common文件夹下新建request.js</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<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.data.status && res.data.code == 200) {
return res
} else {
throw res.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><em id="__mceDel"> })</em></pre>
<pre> } <br><br>export default request</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p> </p>
<p>3.接口配置</p>
<p>项目根目录下新建api文件，api下新建index.js</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<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)<br>// GET请求方式<br><em>api.register = params => request.globalRequest(`${PORT1}/mobile/signUp${formatGetUri(</em><em id="__mceDel">params</em><em id="__mceDel">)}`, 'GET //必须大写，为了兼容其他应用',{}, 1)</em></pre>
<pre>export default api</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p> </p>
<p>4. 新建common/util.js</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_755153" class="syntaxhighlightercsharp">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="csharp comments">/**</code></div>
<div class="line number2 index1 alt1"><code class="csharp spaces"> </code><code class="csharp comments">* 拼接对象为请求字符串</code></div>
<div class="line number3 index2 alt2"><code class="csharp spaces"> </code><code class="csharp comments">* 对于需要编码的文本（比如说中文）我们要进行编码</code></div>
<div class="line number4 index3 alt1"><code class="csharp spaces"> </code><code class="csharp comments">* @param {Object} obj - 待拼接的对象</code></div>
<div class="line number5 index4 alt2"><code class="csharp spaces"> </code><code class="csharp comments">* @returns {string} - 拼接成的请求字符串</code></div>
<div class="line number6 index5 alt1"><code class="csharp spaces"> </code><code class="csharp comments">**/</code></div>
<div class="line number7 index6 alt2"><code class="csharp plain">export function formatGetUri(obj) {</code></div>
<div class="line number8 index7 alt1"><code class="csharp spaces"> </code><code class="csharp keyword">const</code> <code class="csharp keyword">params</code> <code class="csharp plain">= []</code></div>
<div class="line number9 index8 alt2"><code class="csharp spaces"> </code><code class="csharp plain">Object.keys(obj).forEach((key) => {</code></div>
<div class="line number10 index9 alt1"><code class="csharp spaces"> </code><code class="csharp keyword">let</code> <code class="csharp plain">value = obj</code></div>
<div class="line number11 index10 alt2"><code class="csharp spaces"> </code><code class="csharp keyword">if</code> <code class="csharp plain">(</code><code class="csharp keyword">typeof</code> <code class="csharp plain">value !== </code><code class="csharp string">'undefined'</code> <code class="csharp plain">|| value !== </code><code class="csharp keyword">null</code><code class="csharp plain">) {</code></div>
<div class="line number12 index11 alt1"><code class="csharp spaces"> </code><code class="csharp keyword">params</code><code class="csharp plain">.push(.</code><code class="csharp keyword">join</code><code class="csharp plain">(</code><code class="csharp string">'='</code><code class="csharp plain">))</code></div>
<div class="line number13 index12 alt2"><code class="csharp spaces"> </code><code class="csharp plain">}</code></div>
<div class="line number14 index13 alt1"><code class="csharp spaces"> </code><code class="csharp plain">})</code></div>
<div class="line number15 index14 alt2"><code class="csharp spaces"> </code><code class="csharp keyword">return</code> <code class="csharp string">'?'</code> <code class="csharp plain">+ </code><code class="csharp keyword">params</code><code class="csharp plain">.</code><code class="csharp keyword">join</code><code class="csharp plain">(</code><code class="csharp string">'&'</code><code class="csharp plain">)</code></div>
<div class="line number16 index15 alt1"><code class="csharp plain">}</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p> </p>
<p>5.全局配置</p>
<p>在main.js中新增</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<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 class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p> </p>
<p>5.接口调用</p>
<div class="cnblogs_code">
<pre>this.$api.register({mobile: this.mobile}).then(res => {
// 获得数据
console.log(res)
}).catch(res => {<br> // 失败进行的操作<em id="__mceDel"><br></em><em id="__mceDel">})</em></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/liyanfeng/p/15423256.html
頁:
[1]