封装uni.request()
vue中的axios使用方法:this.$axios.get(url,data).then();我们封装一个模拟的vue中的axios,以方便整个项目的使用,来节省代码量this.$H.get(url,data,options).then();this.$H.post().then();this.$H.delete().then();1、创建一个对象,将该对...
·
vue中的axios使用方法:
this.$axios.get(url,data).then();
我们封装一个模拟的vue中的axios,以方便整个项目的使用,来节省代码量
this.$H.get(url,data,options).then();
this.$H.post().then();
this.$H.delete().then();
1、创建一个对象,将该对象挂在Vue的原型下。
新建 @/common/request.js 文件
export default {
get(){},
post(){}
}
2、进入main.js文件:
这里的$H
将来在各个页面中就好比$axais
import request from '@/common/request.js'
Vue.prototype.$H=request;
例:在任意文件中书写下列代码可以调用。
this.$H.get();
3、this.$H.get('/api/getIndexCarousel.jsp');
以上是封装的初步思想
以下是具体封装
1、创建一个对象,将该对象挂在Vue的原型下。
新建 @/common/request.js 文件
例:在任意文件中书写下列代码可以调用。
封装的中心思想是Promise对象解决异步
//页面中想用.then()就必须是Prnmise实例
export default {
request(options){
return new Promise((resolve,reject)=>{//把调取的的接口给了一个Promise实例
uni.request({//uni-app调接口
...options,//所有的数据通过options传过来
success:res=>{
if(options.native){
//假如用户得到res的原型数据,就在页面第三个参数把native:true就好了
resolve(res)
}
if(res.statusCode===200){
//等于200证明请求接口成功,就把里面的data数据给用户返回,
//这里只返回data数据,用户想要原型数据,就在页面的第三个参数里写:native:true
resolve(res.data)
}else{
//调取接口错误时返回给程序员
reject(res)
}
}
})
})
},
//get方法
get(url,data={},options={}){
options.url=url
options.data=data
options.method="get"
return this.request(options)
},
//post方法
post(url,data={},options={}){
options.url=url
options.data=data
options.method="post"
return this.request(options)
}
}
在页面onLoad中调用接口(具体调用接口位置根据项目需求)
onLoad(){
this.$H.get("/api/getIndexCarousel6.jsp",{},{
// native取值为false,表示不需要原型数据,也可以直接不写
native:false
}).then(res=>{
console.log(res)
this.swiperData=res.data
}).catch(res=>{
//调取接口失败的提醒
console.error(res)
})
},
如果只是简单的调取接口如下:
onLoad(){
this.$H.get("/api/getIndexCarousel6.jsp").then(res=>{
this.swiperData=res
})
},
完毕,有问题留言小编…
更多推荐
已为社区贡献4条内容
所有评论(0)