帝皇彩票官网

uni-app uni.request接口封装

2020-4-10    释然 前端及开发文章及欣赏

uni-app uni.request接口封装
今天在做uni-app项目时,发现在uni-app中 调取后台接口需要大量的重复编辑,就在想能不能封装一个如同Vue项目中的this.$axios.get(url,data).then();格式,这样就减少了很多代码重复!!
封装为如同this.$axios.get(url,data).then();格式
第一步、
我们先在index帝皇彩票中的组件部分,创建一个js文件;


第二步、
我们在uni-app的入口文件中引入request.js文件;
在入口文件中挂载到uni-app实例上;


第三步、
开始接口封装:
(以下为js文件代码)

//先把接口暴露出去
export default{
//我们先定一个uni-app方法 以便于以下操作使用uni-app调取接口时便利
request(options){
///我们使用Promise方法来实现调用接口时后面多个.then()的方法
//只有Promise能实现如同$axios后面连续多个.then()的方法
return new Promise((reslove,reject)=>{
uni.request({
...options,
success:res=>{
//判断我们在使用封装的自定义时第三个参数是否为native
//当native为true时 我们返回原数据
if(options.native){
reslove(res)
}
//当native为false时 我们直接返回data中的数据
if(res.statusCode === 200){
reslove(res.data)
}else{
//加入接口参数错误或接口地址错误时 我们返回原错误提示
reject(res)
}
}
})
})
},
//在方法中 第二个参数和第三个参数用ES6新语法来添加默认值
//接口调取get方法
get(url,data={},options={}){
//我们把传过来的参数赋给options,这样我们在使用uni-app
//this.request()方法时 传递一个参数就可以
options.url = url;
options.data = data;
options.method = 'get';
//调用上面自己定义的this.request()方法传递参数
return this.request(options)
},
//接口调取post方法
post(url,data={},options={}){
options.url = url;
options.data = data;
options.method = 'post';
return this.request(options)
}
}

这样我们就已经封装完成啦,接下来就是 在页面内使用!
第四步、
我们可以在页面中来调取已经封装好的自定义事件啦

例一:
个人建议使用ES6新语法 箭头函数 不然使用this还要重新在外面声明定义,太麻烦了,使用箭头函数就会方便很多

// 已封装好的接口方法
//本案例调取接口时 没有参数上传 直接调用的
//这样使用方法时只传递了一个参数,也就是接口地址
//第二个参数没有写,默认为空;假如有参数的话 可以直接填写
//后面的参数都为接口内已经定义好的默认值:{}空对象
//里面的res为接口返回数据中的data里面的内容
this.$H.get('/api/getIndexCarousel.jsp').then(res=>{
//res打印出来是接口返回数据中data里面的数据
console.log(res)
//赋给数据区的变量,方便本页面使用
this.swiperData = res
});

例二、

// 已封装好的接口方法
//本案例使用时 传递了三个参数
//第一个为:接口地址
//第二个为:调取接口传递的参数,方法使用时不用传参,写空对象就好
//第三个为:自定义事件中 native 的属性 若为true 则返回原数据
//若想返回原数据,必须要填写第二个参数,若没有参数,也要写空对象
//因为方法调用时 是按照传参顺序调用的,若不写 参数传递就会出错
this.$H.get('/api/getIndexCarousel.jsp',{},{
native:true
}).then(res=>{
//res打印出来的数据是接口返回来的原数据
console.log(res)
//赋给数据区的变量,方便本页面使用
this.swiperData = res
});


标签: uni-app uni.request接口封装

赞赏


微信

支付宝
拼图有真情 / 人间有真爱您的赞赏将被用于
  • 持续深入的开发
  • 提供更多的风格
  • 租用更好的带宽

日历

链接

blogger

蓝蓝帝皇彩票官网 http://www.bjhbys.com

存档

桔子彩票平台 桔子彩票平台 状元彩票开奖 帝皇彩票官网 迪士尼彩乐园 大有彩票开户 状元彩票平台 快3平台 大象彩票登入 迪士尼彩乐园开奖