【uni app】用promise封装uni.request
<p>原生的uni.requestAPI有promise形式，网上也有uni-request封装模仿axios（我在调用的时候出了问题，还没找到原因）</p><p>在基于以下情况决定自己封装</p>
<ol>
<li>有baseUrl</li>
<li>有时请求<code>header中的content-type</code> 为 <code>application/x-www-form-urlencoded</code></li>
<li>登录后调用接口header中需要塞token</li>
<li>在调用接口前对数据可以进行统一处理，比如删除值为null的属性</li>
<li>在调用接口后某些数据属性为null，在uni app中template里放值为null的属性会显示undefined，可以统一转成无数据</li>
<li>加载状态（？感觉有点不合理，用promise.all解决好像更好）</li>
</ol>
<p>在项目目录static的js文件下的新建url.js</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">function request(url, data, method = 'get', contentType = 1) {
let header = {
'content-type':contentType === 1 ? 'application/json' : 'application/x-www-form-urlencoded',
Authorization:uni.getStorageSync('authorization') != ''?uni.getStorageSync('authorization'):null
}
for (let property in data) {
if (data == null) {
delete data
}
}
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + url,
data,
method,
header,
success: (res) => {
if (res.statusCode == 200) {
resolve(res)
} else if (res.statusCode == 405) {
uni.showToast({
icon: 'none',
title: '请求方法错误',
duration: 1500
});
} else if (res.statusCode == 401) {
uni.showToast({
icon: 'none',
title: '未登录或登录状态已超时',
duration: 1500
});
setTimeout(() => {
uni.reLaunch({
url: '/pages/me/user/user',
});
}, 1500)
store.commit('logout')
} else {
uni.showToast({
icon: 'none',
title: '请求错误:' + res.statusCode,
duration: 1500
});
}
},
fail: (err) => {
console.log('request fail', err)
uni.showToast({
icon: 'none',
title: err.errMsg,
duration: 2000
});
reject(err)
}
})
})
}</pre>
</div>
<p>export暴露后，在main.js中直接挂载在vue上</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import { request, urlList } from './common/url.js'
Vue.prototype.$http= request<br>Vue.prototype.$urlList = urlList</pre>
</div>
<p>页面中的使用：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">this.$http(this.$urlList.login, param, 'post').then(res => {
if (res.data.success) {
} else {
}
})
</pre>
</div>
<p>如果content-type有其他的自己在方法中配置其他的</p><br><br>
来源：https://www.cnblogs.com/Mijiujs/p/12096199.html
頁:
[1]