【uni-app】uni.request封装，更好的管理api接口和使用
<h2 id="前言">前言</h2><p>之前写了一个Vue.js的<strong>axios封装（点击跳转）</strong>，这次是uni-app，uni-app是基于vue.js框架的，我觉得是很好用的一个框架，而且一套代码编译那么多平台，非常节省成本，当然，有好处肯定也有不好的地方，那就是坑。踩坑的地方很多（没踩过坑肯定是没有深入使用uni-app），如果有坑自己尝试了而没有办法处理，建议添加官方QQ群或者到官方论坛提问或者搜索。这次的封装跟axios没多大区别，也是异步请求,但是这个是直接把uni-app的自带API请求uni.request封装。</p>
<h2 id="封装unirequest">封装uni.request</h2>
<p>在根目录下建一个api文件夹，起一个request.js，放入下面代码</p>
<pre><code class="language-javascript">const request = (config) => {
// 处理 apiUrl
config.url = '127.0.0.1/api' + config.url;
if(!config.data){
config.data = {};
}
console.log(JSON.stringify(config.data));
let promise = new Promise(function(resolve, reject) {
uni.request(config).then(responses => {
// 异常
if (responses) {
reject({message : "网络超时"});
} else {
let response = responses.data; // 如果返回的结果是data.data的，嫌麻烦可以用这个，return res,这样只返回一个data
resolve(response);
}
}).catch(error => {
reject(error);
})
})
return promise;
};
export default request;
</code></pre>
<h2 id="管理api">管理api</h2>
<p>接下来继续在api文件夹下面创建一个login.js文件（如果api接口分类<strong>不需要</strong>分开的话就创建index.js，全部放一块，然后引入js，定义一个api，使用就以<code>api.pwdlogin().then(res => {})</code>方式）</p>
<p>PS：<strong>这里跟axios封装方式不一样，如果一个模块有多个请求（比如登录有密码登录，手机验证码登录等等），可以用以下方式，方便管理</strong>。</p>
<pre><code class="language-javascript">import request from '@/api/request'; // 引入封装好的request
// 密码登录
function pwdLogin (data) {
return request({
method: "POST", // 请求方式
url: 'login/pwd', // 请求url
data: data // 参数
})
}
// 手机登录
function phoneLogin (data) {
return request({
method: "POST", // 请求方式
url: 'login/phone', // 请求url
data: data // 参数
})
}
export default{
pwdLogin,
phoneLogin
}
</code></pre>
<h2 id="使用api">使用api</h2>
<pre><code class="language-javascript">import login from '@/api/login.js'; // 引入api
export default {
data() {
return {
phone: '', // 手机号码
password: '', // 密码
code: '', // 手机验证码
isPwdLogin: true // 是否使用密码登录
}
},
onShow() {
this.showInit();
},
methods: {
// 初始化
async showInit() {},
// 登录
handleToLogin() {
if (isPwdLogin) { // 使用密码登录
let pwdParams = {
phone: this.phone,
password: this.password
}
login.pwdLogin(pwdParams).then(res => {
if (res.code == 200) {
uni.showToast({
title: "登录成功",
icon: 'success'
})
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
} else { // 使用手机验证码登录
let phoneParams = {
phone: this.phone,
code: this.code
}
login.phoneLogin(phoneParams).then(res => {
if (res.code === 200) {
uni.showToast({
title: "登录成功",
icon: 'success'
});
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
}
}
}
}
</code></pre>
<p>以上就是这篇uni.request封装的所有内容了，看到这里的伙伴们如果有不明白的地方请留言哦，如果写的不好也可以留言吐槽！！！</p>
<h2 id="总结">总结</h2>
<p>跟axios封装稍微有一点点变化，但是都很明显的，这个封装个人觉得是非常非常好用，然后就是uni-app的uni.request请求问题，这里要说明一下，如果遇到异步问题，请使用下面的方法：</p>
<pre><code class="language-javascript">import products from '@/api/products.js'
export default {
data() {
return {
productsList: []
}
},
onLoad() {
this.showInit();
},
methods: {
// 初始化
async showInit() {
await this.getProductsList();
},
// 获取产品列表
getProductsList() {
products.list().then(res => {
if (res.code == 200) {
this.productsList = res.data;
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
}
}
}
</code></pre>
<p>这里用到了async + await，如果不明白这两个语法的意思和用处，请看 <strong>阮一峰的ES6教程</strong>，这里就不明说了。</p>
<p>原文链接：https://blog.langting.top/archives/93.html</p><br><br>
来源：https://www.cnblogs.com/langting/p/13043215.html
頁:
[1]