**
封装uni.request
**
在项目根目录下创建一个api文件夹,然后在文件夹内创建一个request.js文件,用来封装uni.request的逻辑
const request = (config) => {
// 拼接完整的接口路径
config.url = '127.0.0.1/api' + config.url;
//判断是都携带参数
if(!config.data){
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;
封装一个js文件
import request from '@/utils/request.js'; // 引入封装好的request
export function getDocArticle (data) {
return request({
method: "post", // 请求方式
url: '请求的url', // 请求的url
data: data // 参数
})
}
使用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'
})
});
}
}
}
}
涉及到异步时发送请求
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'
})
});
}
}
}