uniapp Request请求封装的方法
uniapp Request请求封装的方法
·
封装方法一
1.新建request.js
const baseUrl = "http://localhost:6645"
const request = (url = '', date = {}, type = 'POST', header = {
'content-type': 'application/x-www-form-urlencoded'
}) => {
return new Promise((resolve, reject) => {
uni.request({
method: type,
url: baseUrl + url,
data: date,
header: header,
dataType: 'json',
}).then((response) => {
setTimeout(function() {
uni.hideLoading();
}, 200);
let [error, res] = response;
resolve(res.data);
}).catch(error => {
let [err, res] = error;
reject(err)
})
});
}
export default request
2.在main.js中全局注册
import request from "api/request.js"
Vue.prototype.$request = request
3.在页面中调用
this.$request('/recruit/getAll', {
// 传参参数名:参数值,如果没有,就不需要传
}).then(res => {
// 打印调用成功回调
console.log(res)
})
4.效果如下
优缺点
优点:方便快捷,效率高
缺点:请求方法没有完全封装,还是散落在页面各处,后期维护不方便
封装方法二
1.新建请求文件
const baseUrl = "http://localhost:6645"
// 获取所有招聘信息
export function getAllRecruit() {
return uni.request({
url: baseUrl + '/recruit/getAll', //仅为示例,并非真实接口地址。
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
}
});
}
2.在页面中导入
import {getAllRecruit} from "../../api/recruit_info.js"
3,在created周期函数中调用
created() {
// 获取所有招聘信息
getAllRecruit().then(res =>{
console.log(res)
})
}
4.效果图、
优缺点
优点:请求方法封装在单独的文件夹中,页面中只需要调用,不需要其他的业务代码,便于维护
缺点:需要导入,导出,代码比方法一多一些
更多推荐
已为社区贡献6条内容
所有评论(0)