前言
之前写了一个Vue.js的axios封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然,有好处肯定也有不好的地方,那就是坑。踩坑的地方很多(没踩过坑肯定是没有深入使用uni-app),如果有坑自己尝试了而没有办法处理,建议添加官方QQ群或者到官方论坛提问或者搜索。这次的封装跟axios没多大区别,也是异步请求,但是这个是直接把uni-app的自带API请求uni.request封装。
封装uni.request
在根目录下建一个api文件夹,起一个request.js,放入下面代码
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[0]) {
reject({message : "网络超时"});
} else {
let response = responses[1].data; // 如果返回的结果是data.data的,嫌麻烦可以用这个,return res,这样只返回一个data
resolve(response);
}
}).catch(error => {
reject(error);
})
})
return promise;
};
export default request;
管理api
接下来继续在api文件夹下面创建一个login.js文件(如果api接口分类不需要分开的话就创建index.js,全部放一块,然后引入js,定义一个api,使用就以api.pwdlogin().then(res => {})
方式)
PS:这里跟axios封装方式不一样,如果一个模块有多个请求(比如登录有密码登录,手机验证码登录等等),可以用以下方式,方便管理。
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
}
使用api
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'
})
});
}
}
}
}
以上就是这篇uni.request封装的所有内容了,看到这里的伙伴们如果有不明白的地方请留言哦,如果写的不好也可以留言吐槽!!!
总结
跟axios封装稍微有一点点变化,但是都很明显的,这个封装个人觉得是非常非常好用,然后就是uni-app的uni.request请求问题,这里要说明一下,如果遇到异步问题,请使用下面的方法:
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'
})
});
}
}
}
这里用到了async + await,如果不明白这两个语法的意思和用处,请看 ES6教程,这里就不明说了。